从HTML标记中提供可观察的初始值 [英] Giving initial value to observable from the HTML markup

问题描述

我正在尝试创建一个向视图输出一些HTML的 HtmlHelper 扩展。在这个HTML中，我正在配置一些KnockoutJS绑定。我是KO的新手，所以我仍然在努力做一些事情。无论如何，我想要做的是生成在客户端代码上绑定到可观察值的输入字段（在服务器端代码中），然后通过隐藏字段的值设置可观察值的初始值。不幸的是，这对我来说不行。所以我想知道是否有任何方式可以做到这一点（即使我必须完全不同）。

这是我基本做的： / p>

在我的客户端视图模型中，我有以下内容：

  self .dataSource = ko.observable（）; 
 self.pageSize = ko.observable（）; 
  

我的扩展方法输出以下内容：

 < input type =hiddenvalue =/ Employee / Getdata-bind =value：dataSource/> 
< input type =hiddenvalue =30data-bind =value：pageSize/> 
  

但是当页面呈现时，当我检查元素时，我注意到输入字段的值被设置为空字符串，我相信是因为可观察的方式被声明。但是有没有办法来重写这个行为呢？

解决方案

可以使用一种方法来保持你的代码更清洁使用通过使用元素的当前值初始化值来绑定值的自定义绑定。

如果不存在，您甚至可以在视图模型上创建可观察值。

绑定可能如下所示：

  ko.bindingHandlers。 valueWithInit = {
 init：function（element，valueAccessor，allBindingsAccessor，data）{
 var property = valueAccessor（），
 value = element.value; 
 
 //创建可观察的，如果不存在
 if（！ko.isWriteableObservable（data [property]））{
 data [property] = ko.observable （）; 
} 
 
 data [property]（value）; 
 
 ko.applyBindingsToNode（element，{value：data [property]}）; 
} 
}; 
  

您可以使用它：

 < input value =someValuedata-bind =valueWithInit：'firstName'/> 
  

请注意，属性名称是引号，这允许绑定创建它，如果不存在而不是从未定义的值出错。

以下是一个示例： http://jsfiddle.net/rniemeyer/BnDh6

I'm trying to create an HtmlHelper extension that outputs some HTML to the view. In this HTML I'm wiring up some KnockoutJS binding. I'm new to KO so I'm still struggling in getting some things done. Anyway, what I'm trying to do is generate input fields (in the server-side code) bound to observables on my client-side code, then set the initial values of the observables through the value of the hidden fields. Unfortunately, that is not working for me. So I'm wondering if there any way I could get this done (even if I have to do it completely different).

Here's what I'm basically doing:

In my client side view model I have the following:

self.dataSource = ko.observable();
self.pageSize = ko.observable();

And my extension method outputs the following:

<input type="hidden" value="/Employee/Get" data-bind="value: dataSource" />
<input type="hidden" value="30" data-bind="value: pageSize" />

But when the page renders, when I inspect the elements I notice that the value of the input fields is being set to an empty string, which I believe is because of the way observables are being declared. But is there a way to override this behavior or something?

解决方案

One alternative you can use to keep your code a bit cleaner is to use a custom binding that wraps the value binding by initializing it with the element's current value.

You can even have it create observables on your view model, if they don't exist.

The binding might look something like:

ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data) {
        var property = valueAccessor(),
            value = element.value;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }

        data[property](value);

        ko.applyBindingsToNode(element, { value: data[property] });
    }
};

You would use it like:

<input value="someValue" data-bind="valueWithInit: 'firstName'" />

Note that the property name is in quotes, this allows the binding to create it, if it does not exist rather than error out from an undefined value.

Here is a sample: http://jsfiddle.net/rniemeyer/BnDh6

这篇关于从HTML标记中提供可观察的初始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！