KnockoutJS - 在 parent 的标记中绑定 child 组件的点击事件

Question

我正在尝试编写一个可重用的组件库，并提出了这个困扰我一段时间的问题。

我已经使用提供的 example 覆盖了模板引擎。我认为他的 'A quick note about rewriting templates' 段落中提到了我的问题（不过我不确定，我的问题可能有所不同）。但我不知道如何实施它。任何帮助表示赞赏。问题是：

我的模板引擎基本上将模板注册为 'templateName' 和 'markUp'。首先，我有一个产品模型，它是：

 var Product = function(img, brand, description){
      this.img = img;
      this.brand = brand;
      this.description = description;
 };

然后，我的 parent 观点是：

{
    name: 'productlist-view',
    template:  '<productlist-view class="product-list">\
            <ul data-bind="foreach: {data: productlist, as: \'product\'}">\
                <product-box params="parent: $parent, productInfo: product" data-bind="click: getProduct"></product-box>\
            </ul>\
        </productlist-view>'
}

现在，在这个 productlist-view 视图的视图模型中，productlist 属性被定义为 Product 个实例的数组。 product-box 组件应该为每个 Product 创建一个 viewModel 和一个关联的模板。 product-box 组件使用以下方式注册到敲除：

ko.components.register('product-box', {
    'viewModel': function(params){
          this.product = params.product;

          this.getProduct = function(){
               //Will perform an ajax call here
          };
     },
    'template': '<div class="product-box" data-bind="click: getProduct">\
                     <img class="product-img fl" data-bind="attr: {src: product.img}"/>\
                     <p data-bind="text: product.brand"></p>\
                     <p data-bind="text: product.description"></p>\
                 </div>'
})

我知道，在上面的代码中，getProduct 方法有两个绑定。我会谈到这一点。现在，想象一下 productlist-view 中的那个不存在。

上面的代码生成一个 html 如下所示：

<productlist-view ....
    <ul .... 
        <product-box ....
             <div class="product-box" ....
                  <img .../>
                  <p ...  />
                  <p ...  />
             </div>
        </product-box>
        <product-box ..... goes on
    </ul>
</productlist-view>

在 above-code 中，the product-box 元素中的包装器 div 完全没有必要，因为它只是包装元素。此外，该元素已经包含在 product-box 元素中。所以我想删除包装器 div。 这里的问题是，我需要整个产品视觉效果都是可点击的，但我无法将点击事件绑定到 productlist-view 模板中的 getProduct 方法。 当 foreach 循环在 productlist-view 模板中迭代，$data 指向 product 的模型，而不是 viewModel（又名 product-box）。

如何从 parent 视图设置此 getProduct 方法？

有没有办法删除 product-box 中不必要的包装器 div？

换句话说，我怎样才能拥有一个可点击的 product-box 组件，如下所示：

<productlist-view ....
    <ul .... 
        <product-box data-bind="click: getProduct"....
             <img .../>
             <p ...  />
             <p ...  />
        </product-box>
        ...
    </ul>
</productlist-view>

Answer 1

您可以创建一个自定义绑定处理程序，将点击绑定附加到父级，但我觉得这太聪明了一半（并且违反了封装）。如果您的 click 绑定与您的组件相关联，那么 div 成为组件的一部分是有意义的。您可以使用 virtual tag and the component binding，而不是使用自定义产品包装盒标签，这样您就没有多余的包装。

KnockoutJS - 在 parent 的标记中绑定 child 组件的点击事件

KnockoutJS - binding child component's click event in parent's markup

javascript

html

css

knockout.js

template-engine