0
ユーザーが複数の製品を追加できるページを作成しようとしていて、各製品に複数の競合他社が存在する可能性があります。競技者作品はtagitで生成する必要があります。 tagitが動作していないいくつかの理由... これはノックアウトテンプレートです：複数のtagitとknockout.js
<script type="text/html" id="product-template">
<tr>
<td style="width: 5%">
<input type="hidden" name="Products.Index" data-bind="value: Id"/>
</td>
<td style="width: 30%">
Product:<br/>
<select data-bind='options: ProductSource, optionsText: "Product", optionsCaption: "", value: Product, attr: { name: "Products[" + Id + "].Product" }'></select>
</td>
<td style="width: 30%; line-height: 100%; margin-top: 0; padding-top: 0">
Competitors:<br/>
<div id="tags_error" style="display: none;" class="ui-state-error-text">entries must be less than 50 characters each</div>
<ul class="tags" style="margin-top: 2px; padding-top: 0" data-bind="foreach: Competitors">
<li data-bind="text: $data" >
</li >
</ul>
<div style="font-size: 10px; color: GrayText; font-style: italic;">please separate tags using the comma or enter key</div>
@* <input type="text" value="" data-bind='attr: { name: "Products[" + $parent.Id + "].Competitors" }' />*@
</td>
<td style="width: 30%">
Positioning:<br/>
<select data-bind='options: PositioningSource, optionsText: "Positioning", optionsCaption: "", value:Positioning, attr: { name: "Products[" + Id + "].Positioning" }'></select>
</td>
<td style="width: 5%">
<a href="#" data-bind="click: $parent.removeProduct">
<img src="@Links.Content.Images.DeleteAlert_gif"/>
</a>
</td>
</tr>
これは私のノックアウトモデルビューです：
$(document).ready(function() {
function ProductItem(id, product, positioning, competitors) {
var self = this;
self.Id = id;
self.Product = ko.observable(product);
self.Positioning = ko.observable(positioning);
self.Competitors = ko.observableArray(competitors);
self.Competitors.push('1', '2', '3');
self.errors = ko.validation.group(self);
}
function ProductsViewModel() {
var self = this;
var id = 0;
self.Products = [];
self.Products = ko.observableArray();
@if (Model.Products != null)
{
foreach (var item in Model.Products)
{
<text>self.Products.push(new ProductItem(id++, '@item.Product', '@item.Positioning', '@item.Competitors'));</text>
}
}
self.selectedProduct = ko.observable();
self.addProduct = function() {
self.Products.push(new ProductItem(id++));
};
self.removeProduct = function (product) {
self.Products.remove(product);
};
}
ko.validation.init({ insertMessages: true, decorateElement: true, errorClass: "error" });
ko.applyBindingsWithValidation(new ProductsViewModel());
});
そして、これはtagitの設定です：
$(function() {
var changed = function (e1, e2) {
var item = $(e2);
if (item.find('input').val().length > 50) {
setTimeout(function() { item.remove(); }, 50);
$('#tags_error').show();
setTimeout(function() { $('#tags_error').fadeOut(1000); }, 10000);
} else {
$('.tags, .tags input').addClass('ui-state-highlight');
}
};
$('.tags').tagit({
tagSource: '@Html.Raw(Url.Action(MVC.Marketing.Campaign.SearchTags()))',
removeConfirmation: true,
allowSpaces: true,
caseSensitive: false,
onTagAdded: changed,
onTagRemoved: changed,
placeholderText: 'enter a tag'
});
});
製品を追加すると、競合他社がリストiとして表示されます私はタグを追加することができる入力のnstead ...