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. mainViewModel
  3. カスタムバインディング
  4. HTML を作成する
  5. applyBindings を html に
  6. でhtmlを作成しますdata-bind

質問

  1. 無限ループにならずに、その正確な要素にバインドを適用するにはどうすればよいですか?
4

2 に答える 2

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 に答える
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 に答える