Javascript KnockoutJS-绑定子组件'；s单击父项中的事件'；s标记

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

我已使用提供的重写模板引擎。我想我的问题在他的“关于重写模板的简要说明”一段中提到了（不过我不确定，我的问题可能不同）。但我不知道如何实施它。感谢您的帮助。问题是：

我的模板引擎基本上注册作为“templateName”和“markUp”给出的模板。首先，我有一个产品模型，如下所示：

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

然后，我的父视图为：

{
    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>'
}

我知道，在上面的代码中，

getProduct

方法有两个绑定。我会说的。现在，想象一下productlist视图中的一个不在那里

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

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

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

您可以创建一个自定义绑定处理程序，将单击绑定附加到父级，但我觉得它太聪明了一半（并且违反了封装）。如果您的

单击

绑定与您的组件相关联，那么

div

应该是组件的一部分。

---

您可以使用，而不是使用自定义产品框标记，这样您就没有多余的包装器。

也许您可以在参数中传递回调，例如

params=“getProductCallback:myCallback”

并让组件中的单击使用该回调？但这并不能解决我的“包装器div”问题，不是吗？整个产品盒需要可点击。您建议我在何处编写“data bind=”click:“…”表达式？您用于组件的自定义元素无论如何都不会转换为一对一的DOM元素。您需要将组件包装在（例如

div

）元素中并在那里绑定单击，或者使组件中的顶级DOM元素（例如

div

）处理单击。没有其他解决方案，好吧。通过将组件包装在

div

元素中来解决问题，会破坏组件化的所有目的。我想要的是一个productlist元素，它只由

product box

es组成。在两者之间添加一个div似乎很俗气。一定有更好的方法做到这一点：（您的建议意味着父级必须处理getProduct函数。我已经考虑过这一点，但是getProduct函数将检查$index以定位单击的产品。现在，为什么我要费心从编写产品框组件开始…我想您明白了。感谢您的帮助Custom elements将不会这样做。）在DOM中呈现自己，并且无法处理单击。对此我们都无能为力；-）嘿，你的建议实际上比现在更好。尽管现在DOM中充斥着

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