使用knockoutjs映射绑定viewmodel

我刚刚决定学习knockoutjs，并且遇到了一些将json绑定到viewmodel的问题。我已经在它上面搜寻堆，尝试了一堆东西，但我一定错过了一些东西。使用knockoutjs映射绑定viewmodel

的Javascript：

var data = { 
     "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }], 
     "TestText": "Hello World" 
    }; 

    var viewModel = {}; 
    ko.mapping.fromJSON(data, viewModel); 

    ko.applyBindings(viewModel);

HTML

EDIT

可变 '数据' 被用作JSON我得到的一个例子从服务器返回。无论如何，我已经用getJSON更新了上面的代码，并得到了上面的例子真的不能给我的错误，因为它不使用getJSON。

更新JAVASCRIPT：

var viewModel; 
$.getJSON('/myurl', 
    function (data) { 
     viewModel = data; 
    }); 

alert(viewModel); 

$(function() { 
    ko.applyBindings(viewModel); 
});

我这里有我的是它的工作原理..只要警报框的问题是存在的。如果我发表评论，它不起作用！

来源

2013-02-05 jzm

您的第一个问题是您将数据声明为只有一个成员的数组，但您不是在数据绑定声明中引用此数组。

其次，如果您将数据作为JavaScript对象，则不需要从其中获取JSON。

更新JS代码：

var data = { 
    "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }], 
    "TestText": "Hello World" 
}; 

var viewModel = data;//{}; 

ko.applyBindings(viewModel);

工作小提琴：http://jsfiddle.net/AfgAG/19/

编辑：更新的答案，以反映问题的更新，也是最初的回答\

您的视图模型需要将选项列表作为一个可观察数组，以供选项绑定工作。

此外，最好从定义结构的视图模型开始，并且在您使用AJAX调用进行更新时为数据绑定定义的可观察事件起作用。

请参阅下面的更新的JavaScript代码。无法创建小提琴，因为我无法访问小提琴。

var viewModel = 
    { 
     TestText: ko.observable('My Initial Text'), 
     TestList: ko.observableArray([]) 
    } 

ko.applyBindings(viewModel); 

// using set time out here to simulate your ajax call. 
setTimeout(function() { 
    // this would normally be the content for your getJson success method. 
    // this is where you use your from JSON. 
    // data is a javascript object from ajax response. 
    var data = { 
     "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }], 
     "TestText": "Hello World" 
    }; 
    // update the view model observable properties. 
    viewModel.TestText(data.TestText); 
    viewModel.TestList(data.TestList); 
}, 2000);

来源

2013-02-05 04:02:37 ryadavilli

我之所以有fromJSON（）上，这是因为该数据是我确实要走要使用的是来自服务器的json。另外，在你的小提琴中，下拉列表不显示任何东西。 – jzm

@rudeovskizebear我看到你的更新，并且选项不显示任何东西。我会在小提琴上工作（无法访问），并很快更新我的答案。 – ryadavilli

@rudeovskizebear现在请查看已更新的答案。 – ryadavilli

我已经想通了。仅供参考，这是我做了什么：

的JavaScript

var viewModel = (function() { 
     var self = this; 
     this.model = ko.observableArray([]); 

     $.getJSON('/myurl', 
      function (data) { 
       self.model = ko.mapping.fromJS(data, self.model); 
       ko.applyBindings(self.model); 
      }); 
    }); 

    ko.applyBindings(new viewModel());

HTML

<span data-bind="text: TestText"></span> 
<select id="TestList" 
      data-bind=" 
      options: TestList, 
      optionsText: 'Name', 
      optionsValue: 'ID', 
      optionsCaption: 'Please Select'"></select>

来源

2013-02-05 22:44:57 jzm

使用knockoutjs映射绑定viewmodel

回答

相关问题