18

我们正在使用敲除和敲除映射插件来促进 jQTouch Web 应用程序中的数据绑定。我们使用映射插件的原因是能够使用淘汰赛而无需在 javascript 中手动定义/更改视图模型。当您从服务器/客户端数据库初始加载数据时，映射插件非常有用。

我们遇到的问题是我们有一些屏幕/视图，它们的形式可能没有任何初始数据。如果没有这些初始数据，映射插件将无法“生成”视图模型 (ko.mapping.fromJS)。这意味着我们仍然需要为大部分视图手动定义视图模型。

假设这是映射插件（应该）支持的场景，我错了吗？我的意思是，这意味着映射插件仅在您始终具有初始数据加载的情况下可用。

4

3 回答 3

19

除了手动管理视图模型之外，还有几个选项可供您选择。映射插件支持create回调，可让您自定义它的创建方式。这可用于将默认属性添加到对象（如果它们碰巧丢失）。

像这样的东西：http: //jsfiddle.net/rniemeyer/WQGVC/

另一种选择是使用创建缺失属性的绑定。它可能看起来像：

//create an observable if it does not exist and populate it with the input's value
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();
        }

        //populate the observable with the element's value (could be optional)
        data[property](value);

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

你可以这样使用它（需要将属性作为字符串传递，否则会出错）：

<input data-bind="valueWithInit: 'name'" />

示例：http: //jsfiddle.net/rniemeyer/JPYLp/

于 2011-07-18T18:59:21.367 回答
4

我认为您问题的解决方案来自以错误的方式思考视图模型。视图模型不仅是向视图传递数据的东西，而且还是用于提交数据的占位符。

我通常最终使用淘汰赛的方式，我永远不会最终将空视图模型发送到视图。视图模型通常具有我绑定的所有字段。虽然它们可能是空字符串，或者没有显示值的初始化对象，但实际对象仍然存在，每个对象都正确表示为我绑定到的字段。

您可能想研究简单地向视图发送空对象而不是什么。

编辑：这个例子是联合国 ASP.NET MVC

所以基本上，我在服务器端创建了一个视图模型对象，其中包含所有需要显示的数据以及所有需要收集的数据。为了更容易验证代码，我通常将要收集的数据放入它自己的子类中，但这完全取决于您的代码需求。

在任何情况下，进入视图的任何对象都继承自 vmBase 类，该类基本上提供了一个 toJSON() 方法，该方法生成对象的 JSON 序列化。这在我的视图中被视图引擎调用。如下面的代码所示。

      <script type='text/javascript'>         
        var viewModel = ko.mapping.fromJS(<%= Model.ToJson() %>);                     

        $(document).ready( function () {        
            ko.applyBindings(viewModel);                             
        });                  
     </script>

当我准备好重新发送代码时，我只需删除视图模型的 JS 版本。

<script type='text/javascript'>
     var dataToSendToServer = ko.toJS(viewModel);
</script>

在一些 sanarios 中，只有一部分视图模型在发生变化（如果您正在进行 AJAX 更新），您可以做一些很酷的事情，例如切换模板以便可以应用不同的绑定。在这种情况下，我们使用#ID_of_Container作为原始数据/模板的容器，并将模板（可以包含 data-bind="" 元素）替换为新模板ID_of_Template 

<script type='text/javascript'>
    ko.cleanNode($("#ID_of_Container"));
    delete (viewModel.Some_Element_To_Be_Updated);
    viewModel = ko.mapping.updateFromJS(viewModel, New_Data_For_That_Element);

    // Use ko.toJS(viewModel) because standard template plugin doesn't understand 
    // knockout observables
    $("#ID_of_Container").html($("#ID_of_Template").tmpl(ko.toJS(viewModel)))
    ko.applyBindings(viewModel, $("#ID_of_Container")[0]);

</script>
于 2011-07-20T11:00:27.213 回答
0

我现在正在探索的一种方法是创建一个名为 ReturnEmptyObject() 的附加 Web 服务方法，它除了在服务器端创建并返回一个新实例化的对象（其属性将是默认值）之外什么都不做。（在我的情况下是 C#）对象被序列化为 JSON，最后到达 jQuery Ajax 调用.. 然后传递到 ko.mapping.updateFromJS()... 它在初始页面加载时创建所需的 observables.. . 在我调用 ko.applyBindings() 之前。

当 ko.applyBindings() 执行时，它会找到它需要的可观察对象，因此即使它们大部分是空的，它也不会抛出错误。

这样一来，页面最初可以在没有填写任何字段的情况下打开。但是，如果我在服务器端向我的类添加一些新属性，它们仍然会自动显示在客户端。

于 2013-02-28T23:53:59.243 回答