Javascript 使用KnockoutJS从DOM元素读取内容 目标

使用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>

我在想什么 HTML:

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

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

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

function MyViewModel(options) {
    this.productName = ko.observable(options.ProductName);
}

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

---

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

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

在初始化KnockoutJS的视图中，可以序列化模型并将其传递到正在创建的KnockoutJS视图模型中（假设：

主视图：

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

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

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

function MyViewModel(options) {
    this.productName = ko.observable(options.ProductName);
}

---

您正在通过

submit

绑定

addToSummary

。默认情况下，KO将表单元素发送到提交绑定函数

所以

addToSummary

应该有一个参数-

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

您可以向这个函数传递额外的参数（如KO在“note2”下所述），也可以只向表单元素添加一个隐藏字段并从中提取它

<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>

---

为什么不

ko.observable（@（Model[“ProductName”]）”；

？您好，@nemesv。谢谢您的输入。问题是：我使用的是外部JS文件，它无法访问

@（Model[“ProductName”]）

=（如果您使用jQuery，您可以用jQuery选择元素，并以这种方式获取值。@AndrewHitaker我已经考虑过了，但相信KnockoutJS可以做到这一点。您好，@AndrewHitaker。谢谢您的回答。我已经实现了

toJSON

扩展方法，但在我看来（Razor）是

.toJSON（）

方法没有出现。我已经编译了代码。你知道吗？你可能需要在web.config中添加对命名空间的引用。有关详细信息，请参阅。这有帮助吗？这正是我想要的！谢谢，@Nate！+1