【问题标题】:KnockoutOut JS - why are these values not binding correctly?KnockoutOut JS - 为什么这些值没有正确绑定?
【发布时间】:2013-09-16 17:30:27
【问题描述】:

我有这个可淘汰的可观察数组,我正在尝试将它的一些值绑定到我的视图。我遇到困难的地方是因为它是嵌套的。我不确定正确的数据绑定语法是什么。

这是我的可观察数组数据:

我想在广告客户中绑定广告客户名称。

这是我的 HTML

<table id="tblBrand">
        <thead>
            <tr>
                <th>Brand Name</th>
                <th>
                    <button data-bind='click: $root.addBrand'>Add Brand</button></th>
            </tr>

        </thead>
        <tbody data-bind="foreach: brands">
            <tr>
                <td>
                    <input data-bind="value: brandName" readonly="true" />
                </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td>
                                <input data-bind="value: advertiser.advertiserName" />
                            </td>

                            <td>
                                <input data-bind="value: advertiser.advertiserRank" />
                            </td>
                        </tr>
                    </table>
                    <td>
                        <a href='#' data-bind='click: $root.removeBrand' style="color: blue">Remove</a>
                    </td>
            </tr>
        </tbody>
    </table>

我的装订方式是我在每个品牌中寻找。每个品牌都有一个广告客户对象,我想深入研究一下。第二个屏幕截图显示了我的语法和页面呈现的内容。

【问题讨论】:

    标签: javascript html data-binding knockout.js


    【解决方案1】:

    因为您的advertiserko.observable,如果您在表达式中使用它,您需要使用advertiser() 获取它的值:

    <table>
       <tr>
           <td>
               <input data-bind="value: advertiser().advertiserName" />
           </td>
           <td>
               <input data-bind="value: advertiser().advertiserRank" />
           </td>
       </tr>
    </table>
    

    或者你可以使用with binding:

    <table data-bind="with: advertiser">
       <tr>
           <td>
               <input data-bind="value: advertiserName" />
           </td>
           <td>
               <input data-bind="value: advertiserRank" />
           </td>
       </tr>
    </table>
    

    【讨论】:

    • 完美就是我想要的。谢谢!
    猜你喜欢
    • 2010-10-22
    • 2013-03-28
    • 2011-11-30
    • 2016-12-16
    • 1970-01-01
    • 2018-06-08
    • 1970-01-01
    • 2022-07-08
    • 1970-01-01
    相关资源
    最近更新 更多