如何防止敲除重写我的初始复选框值？

问题描述：

我有通过该浏览器通常加载并填充了Laravel一种形式，但使用Knockout.js和AJAX页面更新到服务器：如何防止敲除重写我的初始复选框值？

{{ Form::checkbox('launch_time_change', 'launch_time_change', true, array('data-bind' => checked: emailNotifications.launch_time_change')) }}

这里的第三个参数表示的复选框的状态页面加载，你可以看到，它被检查。

但是，我想然后将此值发送到Knockout，以便可以在服务器上更新复选框而无需重新加载页面。这需要将复选框值存储在ko.observable()中，但每当我尝试将checked绑定应用于我的复选框字段时，默认状态都会被覆盖。

在上述情况下，由于Knockout初始化ViewModel中的观察值，所以最初在页面加载时选中的复选框变为未选中状态。这是expected behaviour，可悲的是：

KO设置元素的选中状态以匹配您的参数值。任何以前的选中状态都将被覆盖。

我该如何阻止这种情况发生？

你有什么控制你的淘汰赛viewmodel？你能不能正确地初始化观察值？ –

如果在构建页面期间无法正确设置observable，那么在调用'applyBindings'之前，您是否至少可以运行一些额外的JS代码，该代码需要实际复选框的值并在viewmodel中设置observable？ –

@JamesThorpe，完全控制，但我不愿意做一个单独的AJAX请求来下载数据。我可以在applyBindings之前初始化observables，但之前我从来没有这样做过，所以我不知道如何工作。 – ReactingToAngularVues

答

那么，我选择了一个完全不同的路线，因为我的应用主要是基于Laravel的。

我决定用Jeffrey Way's laracasts/utilities repo创建一个Javascript门面在那里我可以把JavaScript变数在我看来，像这样：

JavaScript::put([ 
     'emailSubscriptions' => someValue 
    ]);

这比您随时随地访问全球范围内，在连接到window对象名称空间的变量：

console.log(laravel.emailSubscriptions) // "someValue"

它不应该污染全局范围，因为根据config.php：

/* 
|-------------------------------------------------------------------------- 
| JavaScript Namespace 
|-------------------------------------------------------------------------- 
| 
| By default, we'll add variables to the global window object. 
| It's recommended that you change this to some namespace - anything. 
| That way, from your JS, you may do something like `Laracasts.myVar`. 
| 
*/ 
'js_namespace' => 'laravel'

工程非常好，加上它可以在任何地方访问，而不仅仅是内联。不需要通过构造函数传递或者发出单独的AJAX请求。

答

使用Knockout的替代答案是创建一个新的value绑定，它不会覆盖输入值。

ko.bindingHandlers.dont_clear_init_value = _.extend({}, 
    ko.bindingHandlers.value, 
    { 
    init: function(element, valueAccessor, allBindings) { 
     if (ko.isObservable(valueAccessor())) 
     valueAccessor()(ko.selectExtensions.readValue(element)); 

     ko.bindingHandlers.value.init(element, valueAccessor, allBindings); 
    } 
    } 
);

如何在模板中使用。

<p>Login name: <input data-bind="dont_clear_init_value: userName" /></p> 
<p>Password: <input type="password" data-bind="dont_clear_init_value: userPassword" /></p> 

<script type="text/javascript"> 
    var viewModel = { 
     userName: ko.observable(), 
     userPassword: ko.observable(), 
    }; 
</script>

如何防止敲除重写我的初始复选框值？

相关推荐