我正在使用breeze JS处理Knockout绑定。通过使用breeze控制器为某些条目向数据库添加数据时,我试图显示与将数据存储到本地数据库时所需的一个特定属性相关的更多字段。所以我创建了一个自定义绑定,这让我这样做。 但我发现我在视图中添加的字段不会与我在创建新条目时使用的observable绑定
这是淘汰赛绑定
ko.bindingHandlers.htmlTags = {
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
var x = "[ABC, 'XYZ','UVW']";
var jt = bindingContext.$data.type._latestValue; // get the latest value of observable "Type" which is coming from database via breeze
var finalHtmlTag = ko.observable("");
// Strings of HTML which I want to add while execution
var op = "<label>Operation to perform :</label><select data-bind= \"options:"+ x +" , value: operation\"></select>";
var cust = "<label>Customer Name :</label><input data-bind=\"value: customer\" placeholder=\"[Customer Name]\"></input>";
var cust1 = "</div><div><label> Customer Name:</label><input data-bind=\"value: customer\" placeholder=\"[Customer Name]\"></input>";
var loc = "</div><div><label>Copy Location :</label><input data-bind=\"value: copyLocation\" placeholder=\"[Copy Location]\"></input>";
if (jt === 1) { finalHtmlTag = op + cust1; }
if (jt === 2) { finalHtmlTag = op; }
if (jt === 3) { finalHtmlTag = cust + loc; }
// Now manipulate the DOM element
$('#addTag').html(finalHtmlTag); // Make the element visible
}
};
//键值对
var typesX = [
{ key: 0, value: 'Type1' },
{ key: 1, value: 'Type2' },
{ key: 2, value: 'Type3' },
{ key: 3, value: 'Type4'}];
//我的HTML //'job'是一个observable,用于在breeze的帮助下创建一个实例,用于在本地DB中存储特定条目。
<form>
<div data-bind="with: job">
<div>
<label>Job Name :</label>
<input data-bind="value: jobName" placeholder="[JobName]" />
</div>
<div>
<label>Type :</label>
<select data-bind="htmlTags: true, options: $root.typesX, optionsText: 'value', optionsValue: 'key', value: $data.type" />
</div>
<div>
<label>User ID:</label>
<input type="text" placeholder="[User ID]" data-bind="value: userID" />
</div>
<div id="addTag"></div>
//till here everything works fine but after this line bindings are not working properly
</div>