0

目标

使用 KnockoutJS 从 DOM 元素中读取内容。

问题

我的 HTML 中有一个产品列表。代码是这样的：

<li>
    <div class="introduction">
        <h3>@Model["ProductName"]</h3>
    </div>
    <form data-bind="submit: addToSummary">
        <input type="number" 
               placeholder="How much @Model["ProductName"] do you want?" />
        <button>Add product</button>
    </form>
</li>

当我单击 时<button>Add Product</button>，我想向 KnockoutJS 发送<h3></h3>已提交元素内的文本。

使用 KnockoutJS 的文件是外部的并且独立于 HTML。它的名称是summary.js，代码如下：

function ProductReservation(id, name, unity, quantity) {
    var self = this;

    self.id = id;
    self.name = name;
    self.unity = unity;
    self.quantity = quantity;
}

function SummaryViewModel() {
    var self = this;

    self.products = ko.observableArray([
        new ProductReservation(1, "Testing", "kgs", 1)
    ]);

    self.addToSummary = function () {
        // Do Something
    }
}

我在想什么

HTML：

<li>
    <div class="introduction">
        <h3 data-bind="text: productName">@Model["ProductName"]</h3>
    </div>
    [...]
</li>

JS：

productName = ko.observable("text: productName");

但是，当然，没有成功——这不是正确的上下文或语法，只是为了说明。

所以我问：我需要做什么？

4

2 回答 2

1

根据我的经验，一种行之有效的策略是实现一个序列化模型的toJSON扩展方法（如果您使用 JSON.NET 之类的库，您可以对序列化的内容和不序列化的内容进行大量控制）。

在初始化 KnockoutJS 的视图内部，您可以序列化您的模型并将其传递给您正在创建的 KnockoutJS ViewModel（假设：

主视图：

<script type="text/javascript">
    var viewModel = new MyViewModel(@Model.ToJSON());
</script>

视图模型：

function MyViewModel(options) {
    this.productName = ko.observable(options.ProductName);
}
于 2013-06-24T12:21:27.553 回答
1

您正在通过绑定addToSummary进行submit绑定。默认情况下，KO 将表单元素发送到提交绑定函数。

所以addToSummary应该有一个参数 -

self.addToSummary = function (formElement) {
    // Do Something
}

您可以向此函数传递其他参数（如 KO 的单击绑定文档中的“注 2”中所述），或者您可以向表单元素添加一个隐藏字段并从那里拉取它。

<li>
    <div class="introduction">
        <h3>@Model["ProductName"]</h3>
    </div>
    <form data-bind="submit: addToSummary">
        <input type="number" name="quantity" 
               placeholder="How much @Model["ProductName"] do you want?" />
        <input type="hidden" name="productName" value="@Model["ProductName"]" />
        <button>Add product</button>
    </form>
</li>

然后在您的淘汰代码中，您可以使用 jQuery 处理表单元素以提取数据 -

self.addToSummary = function (formElement) {
    var productName = $(formElement).children('[name="productName"]')[0].val();
    var quantity= $(formElement).children('[name="quantity"]')[0].val();
    // ...
    self.products.push(new ProductReservation(?, productName, ?, quantity));
}
于 2013-06-24T13:57:13.390 回答