Question

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

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。我原以为用点符号来访问内部对象的属性是很容易的。但事实并非如此。

有人可以帮助您如何使上述代码生效吗？

Answer 1

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

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

Editing Akshat's fiddle to match

然而，不确定为什么这比嵌套适当的层次结构更有优势。 OP所要求的是相当反模式。我想您可能希望查看the page on binding context Akshat suggests以了解如何将dataTest创建为父对象，然后深入查看标记。

Answer 2

查看fiddle。您需要做的就是这个

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

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

从您的问题来看，在我看来，您要做的是将视图模型绑定到html页面的不同元素。要实现此目的，您可以将id参数传递给apply绑定，以将特定视图模型绑定到页面的特定部分。喜欢这个

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

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

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

Answer 3

它也可以写成：

<span data-bind="text: dataTest()['SalePrice']"></span>

Answer 4

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

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

var viewModel={
    dataTest: data
};

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

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

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

Answer 5

需要将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>

Knockout.js如何访问data-bind上的内部对象属性

5 个答案: