25

我在下面有一个超级简单的淘汰赛代码：

var data ={
    "Id" : 1001,
    "SalePrice" : 12345,
    "ListPrice" : 333,
    "ShortDesc" : "Tayler 12345E",
    "Description" : " Long Description"
};


var viewModel={
    dataTest: ko.observable(data)
};


ko.applyBindings(viewModel);

<span data-bind="text: dataTest.SalePrice"></span>

基本上，我已将整个数据对象传递给可观察属性 dataTest。我原以为用点符号访问内部对象的属性很容易。但不是。

有人可以帮助如何使上述代码工作吗？

4

5 回答 5

37

它现在是一个可观察的（即，它是一个函数）。您需要调用该函数。

<span data-bind="text: dataTest().SalePrice"></span>

编辑 Akshat 的小提琴以匹配.

但是，不确定为什么这比嵌套适当的层次结构更有优势。OP的要求是非常反模式。我认为您可能希望查看有关绑定上下文 Akshat 建议的页面，以了解如何将其创建dataTest为父对象，然后深入了解您的标记。

于 2013-06-02T04:18:54.567 回答
3

看看小提琴。你需要做的就是这个

<span data-bind="text: salePrice "></span>

这将使用视图模型中定义的销售价格填充 span 元素。

从您的问题看来，您正在尝试做的是将视图模型绑定到 html 页面的不同元素。为此，您可以将id参数传递给应用绑定，以将特定视图模型绑定到页面的特定部分。像这样

ko.applyBindings(viewmodel,document.getElementById('id'));

如果您希望直接访问视图模型，请使用绑定上下文。在这种情况下，您需要$data绑定上下文。因此 span 中的绑定将更改为

<span data-bind="text:$data.salePrice"></span>
于 2013-06-02T03:41:40.867 回答
2

也可以写成：

<span data-bind="text: dataTest()['SalePrice']"></span>
于 2018-06-25T11:37:13.600 回答
0

如果页面是只读的，并且视图模型不会改变，（如我的情况）那么你不需要 observable。

您还可以通过执行以下操作使代码示例工作：

var viewModel={
    dataTest: data
};

然后，您可以使用简单的点符号访问数据绑定中的属性。

<span data-bind="text: dataTest.SalePrice"></span>

在我的情况下，使用上下文或绑定是不可取的，因为我必须不断地在比较表中的两个对象之间来回切换。

于 2014-12-01T19:49:16.957 回答
0

对 ko.observable 的调用需要从 MVVM 移动到 HTML 元素：

    var data ={
    "Id" : 1001,
    "SalePrice" : 12345,
    "ListPrice" : 333,
    "ShortDesc" : "Tayler 12345E",
    "Description" : " Long Description"
};


var viewModel={
    dataTest: data
};


ko.applyBindings(viewModel);

<span data-bind="text: ko.observable(dataTest.SalePrice)"></span>
于 2016-12-02T15:59:37.620 回答