0

我的问题是，我没有添加$(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. 主视图模型
  3. 自定义绑定
  4. 创建 HTML
  5. 将绑定应用到 html
  6. 创建htmldata-bind

问题

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

2 回答 2

0

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

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

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

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

这是knockoutjs foreach的链接

于 2012-09-02T09:46:44.473 回答
0

所以基本上我发现我可以制作函数，通过在里面创建新函数来$("div.dt-toolbar")动态更新htmlmainAdmin 

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

这样，它只将自身应用于元素，并且可以动态创建任何元素！

于 2012-09-01T20:46:51.467 回答