为组件设置viewModel = $ data [英] Set viewModel = $data for Component

问题描述

我刚刚开始了解Knockout Components.现在，我正在尝试创建仅模板"组件.我遇到的问题是将组件的视图模型设置为我正在使用组件的位置的$ data.我已经从淘汰赛"页面( http://knockoutjs.com/documentation/component- overview.html )

I'm just starting to get my head around Knockout Components. Right now I'm trying to create a "Template Only" Component. The issue I ran into is getting the viewmodel of the component set to the $data of where I'm using the Component. I've modified the example from the Knockout page (http://knockoutjs.com/documentation/component-overview.html)

这是一个显示我所做的事情的小精灵: http://plnkr.co/edit/23PVEW9aQ63A9yq2wRJp

Here's a plunk that shows what I've done: http://plnkr.co/edit/23PVEW9aQ63A9yq2wRJp

我在foreach中使用该组件，例如:

I'm using the component in a foreach like:

  <ul data-bind="foreach: products">
    <li class="product">
      <strong data-bind="text: name"></strong>
      <div data-bind="component: { name: 'like-widget', params: {data: $data}}"></div>
    </li>
  </ul>

以下是组件:

ko.components.register('like-widget', {
  viewModel: function(params) {
    // Data: value is either null, 'like', or 'dislike'
    this.data = params.data;

    // Behaviors
    this.like = function() {
      this.data.userRating('like');
    }.bind(this);
    this.dislike = function() {
      this.data.userRating('dislike');
    }.bind(this);
  },
  template: '<div data-bind="with: data"><div class="like-or-dislike" data-bind="visible: !userRating()">\
            <button data-bind="click: $parent.like">Like it</button>\
            <button data-bind="click: $parent.dislike">Dislike it</button>\
        </div>\
        <div class="result" data-bind="visible: userRating">\
            You <strong data-bind="text: userRating"></strong> it\
        </div></div>'
});

这样做是可行的，但是似乎有一种更简单的方法将组件的viewModel设置为$ data.

Doing it this way works, but it seems like there would be an easier way to set the viewModel of component to $data.

这是正确的方法还是我错过了什么?

Is this the correct way or am I missing something?

推荐答案

尽管您可以将$ data作为参数传递，但是请注意，您现在已经将组件的设计与视图模型的设计紧密地结合在一起.一种更可重用的方法是将名称和userRating作为参数传递，并使用这些参数为不了解产品视图模型结构的组件构造视图模型.

Although you can pass in the $data as a parameter, please note that you have now tightly coupled the design of the component to the design of the view model. A more reusable approach would be to pass the name and userRating in as parameters, and use those to construct a view model for the component that knows nothing about the structure of the product view model.

话虽这么说，您不必将$ data作为参数传递给组件即可访问它.相反，您可以在组件绑定到的元素上使用ko.contextFor，并以这种方式获取$ data.

That being said, you don't need to pass $data in as a parameter to the component in order to have access to it. Instead, you can use ko.contextFor on the element the component is bound to, and get at the $data that way.

示例:

ko.components.register('like-widget', {    
    viewModel: {
        createViewModel: function (params, componentInfo) {
            var context = ko.contextFor(componentInfo.element);

            var self = context.$data;

            return ko.utils.extend(context.$data, {
                ratingButtonVisible: ko.computed(function() {
                    return (self.userRating()==null);
                }),

                ratingDescriptionVisible: ko.computed(function() {
                    return !(self.userRating()==null);
                }),                

                like:   function() {                    
                    self.userRating('like');
                },

                dislike:  function() {                    
                    self.userRating('dislike');
                }
            });
        }            
    },
    template: { element: 'like-template' }
});

ko.applyBindings(new MyViewModel());

工作 JSFiddle

这篇关于为组件设置viewModel = $ data的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！