0

多くのコードを節約できる KnockoutJS マッピング プラグインを初めて使用したいと思いました。ただし、オブジェクトはマップされていますが、ビューにバインドされていません。私のコードは次のとおりです。

JavaScript

...
//global variables
var mv;
...
function viewmodel() {
    var self = this;

    self.searchViewModel = ko.mapping.fromJS({});
}
...
//load function
$().ready(function () {
    mv = new viewmodel();
    doSearch();
    ko.applyBindings(mv);
...
}
function doSearch() {
    var params = "{'_search':'" + JSON.stringify(searchObject) + "'}";
    $("#_pnlMachineList").mask("Loading...");

    $.ajax({
        type: "POST",
        url: "machinepark2.aspx/doSearch",
        data: params,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        dataFilter: function(data) {
            // This boils the response string down 
            //  into a proper JavaScript Object().
            var msg = eval('(' + data + ')');

            // If the response has a ".d" top-level property,
            //  return what's below that instead.
            if (msg.hasOwnProperty('d'))
                return msg.d;
            else
                return msg;
        },
        success: function (msg) {
            ko.mapping.fromJS(msg, {}, mv.searchViewModel);
        },
        error: function (msg) {
            //document.location = "/errorPage.aspx";
        }
    });
}

HTML

Count: <span data-bind="text: searchViewModel.searchCount"></span>
<br />
<table class="table">
    <thead>
        <tr class="text_bold">
            <th>Name</th>
            <th>Type</th>
            <th>Model</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: searchViewModel.machines">
        <tr style="cursor:pointer;" data-bind="attr: { 'data-guid': GUID }, click: loadmachine">
            <td data-bind="text: EndUserMachineName"></td>
            <td><img alt="" style="position: relative;" data-bind="attr: { src: TypeImage }"></td>
            <td data-bind="html: ManufacturerModel"></td>
        </tr>
    </tbody>
</table>

doSearch 関数が実行されると、mv.searchViewModel を firebug コンソールで表示できます。すべてのプロパティはオブザーバブルに適切に配置されます。 ここに画像の説明を入力

そして、mv.searchViewModel.searchCount() は整数 2 を返します。

しかし、カウント ラベルとテーブルは塗りつぶされていません。私は何を間違っていますか？

編集: Firebug はバグを与えません。

4

1 に答える 1

2

ほとんどの場合、searchViewModel の後の () を忘れています。修正されたコードは次のとおりです（フィドル：http://jsfiddle.net/hv9Dx/7/）：

html:

Count: <span data-bind="text: searchViewModel().searchCount"></span>
<br />
<table class="table">
    <thead>
        <tr class="text_bold">
            <th>Name</th>
            <th>Type</th>
            <th>Model</th>
        </tr>
    </thead>    
    <tbody data-bind="foreach: searchViewModel().machines">
        <tr style="cursor:pointer;" data-bind="attr: { 'data-guid': GUID }">
            <td data-bind="text: EndUserMachineName"></td>
            <td><img alt="" data-bind="attr: { src: TypeImage }" /></td>
            <td data-bind="text: ManufacturerModel"></td>
        </tr>
    </tbody>
</table>

js:

var dataFromServer = {
    searchCount:5,
    machines:[{
        GUID:"123",
        EndUserMachineName:"1",
        TypeImage:"https://i.chzbgr.com/maxW500/7879380224/hE2041EA3/",
        ManufacturerModel:"lorem lorem"
    }
        ]
}
var ajaxSim = function(callback){
    setTimeout(function(){
        callback(dataFromServer);
    },1000);
}

var mv;

function viewmodel() {
    var self = this;
    self.searchViewModel = ko.observable({searchCount:4, machines:[]});
}

mv = new viewmodel();
doSearch();
ko.applyBindings(mv);

function doSearch() {
    ajaxSim(
        function (msg) {
            console.log(msg)

            mv.searchViewModel(ko.mapping.fromJS(msg));

    });
}
于 2013-11-04T17:50:06.570 に答える