使用data-bind添加元素的位置和时间

Question

我的问题是，我不在哪里将$(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，基本上按此顺序：

1. 视图模型
2. mainViewModel
3. 自定义绑定
4. 创建HTML
5. applyBindings to html
6. 使用data-bind
创建HTML

问题

1. 如何在不进入infinte循环的情况下将绑定应用于该确切元素？

Answer 1

所以基本上我发现我可以创建函数，通过在$("div.dt-toolbar")内创建新函数来动态更新html mainAdmin

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();

这种方式它只适用于元素，可以动态创建任何元素！

Answer 2

为什么不使用foreach对表进行绑定？你将某些“html元素”拉入视图模型，这是一种不好的做法。

<tbody data-bind="foreach: { data: tableData, afterRender: a function }>
<tr>
 <td></td>
 ...
</tr>

要选择，您可以使用绑定选项，

<select data-bind="options: optionsData">
</select>

这是指向knockoutjs foreach

的链接