我的问题是,我不知道在哪里将$(ele).html('some html')
添加到我的脚本中,因为添加它要么太早,要么太晚。这是我的实际问题:
首先我创建viemModel
var mainAdmin = function(){
var self = this;
self.pageLanguage = mainAdminDTLanguage;
self.tableData = ko.observableArray([]);
self.dataTable = ko.observable(null);
/*self.tableRowClick = function(data) {
var checkCode = confirm('Vai atzīmēt šo kuponu?');
if(checkCode){
alert(data[0]);
$.ajax({
url: '/api/code/mark/'+data[0],
type: 'GET',
success: function(data) {
console.log(data);
}
});
}
};*/
self.tableOptions = { aaSorting: [["1","desc"]] };
self.dtSelectValue = ko.observable('visus');
self.initLoad = function() {
$.ajax({
url: '/api/item/all',
dataType: 'json',
success: function(data) {
$.each(data, function(index) {
self.tableData.push([this.ID,this.Title, Dateformat('M jS, H:i:s',new Date(this.EndDate)),'<button>Dzēst</button>']);
console.log(this.ID);
});
console.log(data);
}
});
};
self.recentItemLoad = function() {
$.ajax({
url: '/api/item/inactive',
dataType: 'json',
success: function(data) {
self.tableData([]);
$.each(data, function(index) {
self.tableData.push([this.ID,this.Title, Dateformat('M jS, H:i:s',new Date(this.EndDate)),'<button>Dzēst</button>']);
console.log(this.ID);
});
console.log(data);
}
});
};
self.activeItemLoad = function() {
$.ajax({
url: '/api/item/active',
dataType: 'json',
success: function(data) {
self.tableData([]);
$.each(data, function(index) {
self.tableData.push([this.ID,this.Title, Dateformat('M jS, H:i:s',new Date(this.EndDate)),'<button>Dzēst</button>']);
console.log(this.ID);
});
console.log(data);
}
});
}
self.dtSelectValue.subscribe(function(newValue) {
(newValue == 'visus') ? mainViewModel.mainAdminPage.initLoad() : (newValue == 'aktīvos') ? mainViewModel.mainAdminPage.activeItemLoad() : (newValue == 'neaktīvos') ? mainViewModel.mainAdminPage.recentItemLoad() : false
});
};
是的,我知道它有点乱,但实际上我还没有时间优化它
然后我创建jQuery的DataTable绑定
ko.bindingHandlers.dataTable = {
init: function(element, valueAccessor) {
var options = valueAccessor();
var defaults = {
"aaData": options["data"](),
"bRetrieve": true,
"oLanguage": options["language"],
"bJQueryUI": true,
"sDom": '<"H"l<"dt-toolbar">fr>t<"F"ip>',
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
$(nRow).mouseover(function(){
$(nRow).attr("style","background-color:yellow !important;");
});
$(nRow).mouseout(function() {
$(nRow).removeAttr("style");
});
if(typeof options["rowClick"] === "function") {
$(nRow).click(function() {
options["rowClick"](aData);
});
}
return nRow;
},
};
var tableOptions = $.extend(defaults,options["options"]);
options["object"]($(element).dataTable(tableOptions));
$("div.dt-toolbar")
.html('Rādīt <select data-bind="value: $data.dtSelectValue"><option>visus</option><option>aktīvos</option><option>neaktīvos</option></select> kuponus');
},
update: function(element,valueAccessor) {
var options = valueAccessor();
options["object"]().fnClearTable();
options["object"]().fnAddData(options["data"](),true);
}
};
您可以看到我创建了$("div.dt-toolbar")
.html('Rādīt <select data-bind="value: $data.dtSelectValue"><option>visus</option><option>aktīvos</option><option>neaktīvos</option></select> kuponus');
@init
!
然后我创建mainViewModel并应用绑定
// --- mainView viewmodel
var mainViewModel = {
indexPage: new indexViewModel(),
itemPage: new itemViewModel(),
catPage: new categoryViewModel(),
companyPage: new companyAdmin(),
mainAdminPage: new mainAdmin()
};
// --Applied bindings
ko.applyBindings(mainViewModel);
现在您可以看到我在应用绑定后创建DataTable,基本上按以下顺序:
- viewModel
- mainViewModel
- 自定义绑定
- 创建HTML
- applyBindings到html
- 用
data-bind
创建html
问题
- 如何将绑定应用于该精确元素而不进入中篇循环
所以基本上我想好了我可以制作函数,通过在mainAdmin
中创建新函数,用html
动态更新$("div.dt-toolbar")
self.updateDTmenu = function () {
$("div.dt-toolbar")
.html('Rādīt <select data-bind="value: dtSelectValue"><option value="visus">visus</option><option value="aktīvos">aktīvos</option><option value="neaktīvos">neaktīvos</option></select> kuponus');
ko.applyBindings(new mainAdmin(), $("div.dt-toolbar")[0]);
};
然后在dataTable
绑定而不是$("div.dt-toolbar").html('someHtml');
内写入该mainViewModel.mainAdminPage.updateDTmenu();
通过这种方式,它只将自己应用于元素,并且可以动态创建任何元素!
为什么不使用foreach
为表进行绑定?将某些"html元素"拉入视图模型中,我认为这是一种糟糕的做法。
<tbody data-bind="foreach: { data: tableData, afterRender: a function }>
<tr>
<td></td>
...
</tr>
要进行选择,可以使用绑定选项,
<select data-bind="options: optionsData">
</select>
这里有一个链接到knockoutjsforeach