ASP.NET和KnockoutJS中如何将ko.observable的默认值设置为控件本身的默认值？ [复制]答案

【问题标题】：How to set the default value of ko.observable to the default value of the control itself in ASP.NET and KnockoutJS? [duplicate]ASP.NET和KnockoutJS中如何将ko.observable的默认值设置为控件本身的默认值？ [复制]
【发布时间】：2013-06-26 19:28:24
【问题描述】：

我有一个带有 KnockoutJS 绑定控件的 ASP.NET C# 网页：

<asp:TextBox runat="server" ID="txtOfferName" placeholder="Offer Name" data-bind="value: planName"></asp:TextBox>

和

planName: ko.observable("")

...在文档加载时设置。当 txtOfferName 应该以空白开始时，这一切都很好。现在，我想将 txtOfferName 的值设置为在 Page_Load 期间不为空的值。如果我只是这样做

txtOfferName.Text = "New Value";

它不会起作用，因为 ko.observable("") 一旦被绑定就会覆盖这个值。有没有办法绑定一个 observable 并让它默认为它绑定到的控件的初始值？我当然可以

ko.observable("New Value")

但是这些值来自数据库，因此在前端而不是后端设置它们要困难得多。最坏的情况，我可以序列化所有这些值，将它们放入隐藏字段并使用 KO 分配它们，但我想先检查一下是否有更简单的方法。

谢谢！

【问题讨论】：

您是否考虑过通过 AJAX 调用来获取数据，然后在返回的 JSON 上调用 ko.applyBindings，该 JSON 可以映射到您的视图模型？
我可以将服务器端的数据 JSON 并放入隐藏字段中，以避免完全执行 AJAX。我只是想知道是否有类似 ko.observableDefaultValue() 的东西，所以原始值将从元素中获取，然后绑定到模型上。

标签： c# asp.net knockout.js

【解决方案1】：

<%@ Page ClientIDMode="Static" %>
<input type="hidden" runat="server" id="hdnOfferName" />
    <asp:TextBox runat="server" ID="txtOfferName" placeholder="Offer Name" data-bind="value: planName"></asp:TextBox>

                //code behind
                hdnOfferName.Value = "New Value";

        //javascript (this is $jquery, use document.getElementById() for javascript)
     planName = ko.observable($("#hdnOfferName").val());

【讨论】：

是的，这是我的第一个猜测，但是视图模型在一个单独的 .js 文件中，所以东西在那里不起作用。
我已经编辑了我的答案，这样您就可以在没有的情况下实现解决方案。我已将 ClientIDMode="Static" 添加到 @Page 声明中，这告诉 asp.net 按原样呈现 id。现在，在您的 js 中，您可以信任隐藏输入的 id。如果您的 aspx 中有中继器/数据网格，您可能会（但不太可能）出现意外行为，这取决于您对中继器/数据网格所做的工作。

【解决方案2】：

How to extend knockout observables to read default value from binding?

这个基本相同问题的答案是您最好、最灵活的选择。当绑定初始化时，它会将输入的当前值存储在可观察对象中

【讨论】：

Nik I. 重要的是要注意这个引用的答案是针对 ASP.NET MVC Web 应用程序的。答案使用剃刀引擎语法，因此您熟悉的被简化的 @ 替换。请注意引用答案中的@Model.SomeValue。

【解决方案3】：

我没有将 KO 与 WebForms 一起使用，但我认为与 MVC 的想法相同。在 ASP.NET MVC 中，我在像这样调用ko.applyBinding 之前设置了默认值...

<asp:TextBox runat="server" data-bind="value: planName"></asp:TextBox>

<script src="viewModel.js" />

<script type="text/javascript">
  myViewModel.planName('<%=Stuff.planName%>');
  ko.applyBinding(myViewModel);
</script>

【讨论】：