WinJS在ListView中更改了一个specedicitem的模板元素

时间:2013-04-03 20:38:13

标签: javascript data-binding microsoft-metro winjs

我们走了,这是我的问题,我找不到任何解决方法。 我为Gridview提供此模板(用于数据绑定)的问题:

<div id="mytemplate" data-win-control="WinJS.Binding.Template">
    <div id="questions" class="tweet">
        <img src="#" style="-ms-grid-row-span: 2; width: 64px; height: 64px; margin-right: 10px;" data-win-bind="src:picture_url">
        <h2 style="width:auto;-ms-grid-column: 2; -ms-grid-column-span: 1; margin-left: 1px; margin-right: 0px; -ms-grid-row-span: 2;" data-win-bind="textContent:type"></h2>   
        <label id="answer" ">Message</label>            
      </div>    
</div>

在所有项目中,我将消息作为标签 因此,当我点击一个项目时,在itemInvokedHandler(eventObject)函数中,我显示一个包含输入文本的Flyout,我希望这个标签将从我的输出文本字段从Flyout更改。这是什么解决方案。 只是,我正在考虑将标签标签移到模板之外,但这不符合逻辑,因为它需要每个项目的标签。 任何建议或帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

我认为最好的选择是使用MVVM方法:将每个项目绑定到一个实体,让该实体公开一个名为Text的可观察属性,将Flyout绑定到另一个可用当前所选项目更新的可观察属性SelectedItem,并使用两个-way绑定,以便在Flyout文本输入更改时更新所选项目的Text属性。万一你需要它,我在博客上写了两种方式绑定:http://codeworks.it/blog/?p=81

答案 1 :(得分:0)

建议在弹出式HTML中使用data-win-bind属性。下面的代码将在弹出窗口的输入元素中显示item.title属性

test.html:
<div class="edit-item" data-win-control="WinJS.UI.Flyout">
        <input type="text" class="item-text" data-win-bind="value: title" />
        <input type="submit" class="submit" />
</div>

test.js: event handler for iteminvoked event for the listview control
_oniteminvoked: function oniteminvoked(event)
{
    var item = this.items.getAt(event.detail.itemIndex); // assuming items is the list binding to the list view
    var editItemFlyoutElement = this.element.querySelector('.edit-item');
    WinJS.Binding.processAll(editItemFlyoutElement, item);
    editItemFlyoutElement.winControl.show(this.element);
}

HTH