Razor 多个tagit和knockout.js
我试图创建一个页面，用户可以添加多个产品，每个产品可以有多个竞争对手。需要使用tagit生成竞争对手工件。由于某种原因，tagit不起作用。。。 这是淘汰模板：Razor 多个tagit和knockout.js,razor,knockout.js,tag-it,Razor,Knockout.js,Tag It,我试图创建一个页面，用户可以添加多个产品，每个产品可以有多个竞争对手。需要使用tagit生成竞争对手工件。由于某种原因，tagit不起作用。。。 这是淘汰模板： <script type="text/html" id="product-template"> <tr> <td style="width: 5%"> <input type="hidden" name="Products.Index" data-bind="value:
<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>
添加产品效果很好，只是竞争对手显示为一个列表，而不是我可以添加标签的输入…和解决方案。模板：
<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'></select>
<input data-bind='attr: { name: "Products[" + Id + "].Product", value: (Product() !== undefined) ? Product().Product : "" }' type="hidden" value="">
</td>
<td style="width: 30%; line-height: 100%; margin-top: 0; padding-top: 0">
Competitors:<br/>
<ul style="margin-top: 2px; padding-top: 0" data-bind="tagit:Competitors, productId:$data.Id"></ul>
<div style="font-size: 10px; color: GrayText; font-style: italic;">please separate competitors using the comma or enter key</div>
</td>
<td style="width: 30%">
Positioning:<br/>
<select data-bind='options: PositioningSource, optionsText: "Positioning", optionsCaption: "", value:Positioning'></select>
<input data-bind='attr: { name: "Products[" + Id + "].Positioning", value: (Positioning() !== undefined) ? Positioning().Positioning : "" }' type="hidden" value="">
</td>
<td style="width: 5%">
<a href="#" data-bind="click: $parent.removeProduct">
<img src="@Links.Content.Images.DeleteAlert_gif"/>
</a>
</td>
</tr>
产品：
竞争对手：
请使用逗号或enter键分隔竞争对手
定位：
<script type="text/javascript">
var ProductSource = [];
var index = 0;
$.ajax({
type: "GET",
url: '@Html.Raw(Url.Action(MVC.UserChoice.ForName()))',
data: { userChoiceName: '@UserChoiceKey.OpportunityProductInterest' },
cache: false,
success: function (data) {
data.forEach(function (item)
{ ProductSource.push({ Product: item.Text }); });
}
});
var PositioningSource = [];
var index = 0;
$.ajax({
type: "GET",
url: '@Html.Raw(Url.Action(MVC.UserChoice.ForName()))',
data: { userChoiceName: '@UserChoiceKey.WorkRequestProductPositioning' },
cache: false,
success: function (data) {
data.forEach(function (item)
{ PositioningSource.push({ Positioning: item.Text }); });
}
});
$(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.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.bindingHandlers.tagit = {
//https://github.com/aehlke/tag-it
init: function (element, valueAccessor, allBindingsAccessor) {
var options = {
allowSpaces: true,
caseSensitive: false,
showAutocompleteOnFocus: true,
tagSource: '@Html.Raw(Url.Action(MVC.Marketing.Campaign.SearchTags()))',
itemName: "Products[" + allBindingsAccessor.get('productId') + "].Competitors",
fieldName:""
};
var tags = allBindingsAccessor()["tagsSource"];
if (tags)
$.extend(options, {
autocomplete: { source: tags, delay: 0, minLength: 0 }
});
$(element).tagit(options);
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var tags = value;
$(element).tagit("removeAll");
for (var x = 0; x < tags.length; x++) {
$(element).tagit("createTag", tags[x]);
}
}
};
ko.validation.init({ insertMessages: true, decorateElement: true, errorClass: "error" });
ko.applyBindingsWithValidation(new ProductsViewModel());
});
var ProductSource=[]；
var指数=0；
$.ajax({
键入：“获取”，
url:“@Html.Raw（url.Action（MVC.UserChoice.ForName（））”，
数据：{userChoiceName:'@UserChoiceKey.OpportunityProductInterest'}，
cache:false，
成功：功能（数据）{
data.forEach（功能（项）
{ProductSource.push（{Product:item.Text}）；}）；
}
});
var PositionSource=[]；
var指数=0；
$.ajax({
键入：“获取”，
url:“@Html.Raw（url.Action（MVC.UserChoice.ForName（））”，
数据：{userChoiceName:'@UserChoiceKey.WorkRequestProductPositioning'}，
cache:false，
成功：功能（数据）{
data.forEach（功能（项）
{PositioningSource.push（{Positioning:item.Text}）；}）；
}
});
$（文档）.ready（函数（）{
功能ProductItem（id、产品、定位、竞争对手）{
var self=这个；
self.Id=Id；
自身产品=可观察的（产品）；
自我定位=可观测（定位）；
自我竞争对手=可观察到的对手；
self.errors=ko.validation.group（self）；
}
函数ProductsViewModel（）{
var self=这个；
var-id=0；
self.Products=[]；
self.Products=ko.observearray（）；
@if（Model.Products！=null）
{
foreach（Model.Products中的var项）
{
self.Products.push（新的ProductItem（id++、'@item.Product'、'@item.Position'、'@item.Competitors'）；
}
}
self.selectedProduct=ko.observable（）；
self.addProduct=函数（）{
self.Products.push（新产品项（id++））；
};
self.removeProduct=功能（产品）{
自。产品。移除（产品）；
};
}
ko.bindingHandlers.tagit={
//https://github.com/aehlke/tag-it
init:function（元素、valueAccessor、allBindingsAccessor）{
变量选项={
allowSpaces:true，
区分大小写：错误，
showAutocompleteOnFocus：正确，
tagSource:“@Html.Raw（Url.Action（MVC.Marketing.Campaign.SearchTags（））”，
itemName:“产品[“+allBindingsAccessor.get（'productId'）+“].Competitors”，
字段名：“
};
var tags=allBindingsAccessor（）[“tagsSource”]；
如果（标签）
$.extend（选项{
自动完成：{source:tags，delay:0，minLength:0}
});
$（元素）.tagit（选项）；
},
更新：函数（元素、值访问器）{
var value=ko.utils.unwrapobbservable（valueAccessor（））；
var标签=价值；
$（元素）.tagit（“removeAll”）；
对于（var x=0；x<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'></select>
<input data-bind='attr: { name: "Products[" + Id + "].Product", value: (Product() !== undefined) ? Product().Product : "" }' type="hidden" value="">
</td>
<td style="width: 30%; line-height: 100%; margin-top: 0; padding-top: 0">
Competitors:<br/>
<ul style="margin-top: 2px; padding-top: 0" data-bind="tagit:Competitors, productId:$data.Id"></ul>
<div style="font-size: 10px; color: GrayText; font-style: italic;">please separate competitors using the comma or enter key</div>
</td>
<td style="width: 30%">
Positioning:<br/>
<select data-bind='options: PositioningSource, optionsText: "Positioning", optionsCaption: "", value:Positioning'></select>
<input data-bind='attr: { name: "Products[" + Id + "].Positioning", value: (Positioning() !== undefined) ? Positioning().Positioning : "" }' type="hidden" value="">
</td>
<td style="width: 5%">
<a href="#" data-bind="click: $parent.removeProduct">
<img src="@Links.Content.Images.DeleteAlert_gif"/>
</a>
</td>
</tr>
<script type="text/javascript">
var ProductSource = [];
var index = 0;
$.ajax({
type: "GET",
url: '@Html.Raw(Url.Action(MVC.UserChoice.ForName()))',
data: { userChoiceName: '@UserChoiceKey.OpportunityProductInterest' },
cache: false,
success: function (data) {
data.forEach(function (item)
{ ProductSource.push({ Product: item.Text }); });
}
});
var PositioningSource = [];
var index = 0;
$.ajax({
type: "GET",
url: '@Html.Raw(Url.Action(MVC.UserChoice.ForName()))',
data: { userChoiceName: '@UserChoiceKey.WorkRequestProductPositioning' },
cache: false,
success: function (data) {
data.forEach(function (item)
{ PositioningSource.push({ Positioning: item.Text }); });
}
});
$(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.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.bindingHandlers.tagit = {
//https://github.com/aehlke/tag-it
init: function (element, valueAccessor, allBindingsAccessor) {
var options = {
allowSpaces: true,
caseSensitive: false,
showAutocompleteOnFocus: true,
tagSource: '@Html.Raw(Url.Action(MVC.Marketing.Campaign.SearchTags()))',
itemName: "Products[" + allBindingsAccessor.get('productId') + "].Competitors",
fieldName:""
};
var tags = allBindingsAccessor()["tagsSource"];
if (tags)
$.extend(options, {
autocomplete: { source: tags, delay: 0, minLength: 0 }
});
$(element).tagit(options);
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var tags = value;
$(element).tagit("removeAll");
for (var x = 0; x < tags.length; x++) {
$(element).tagit("createTag", tags[x]);
}
}
};
ko.validation.init({ insertMessages: true, decorateElement: true, errorClass: "error" });
ko.applyBindingsWithValidation(new ProductsViewModel());
});