WinJS 更改 ListView 中特定项目的模板元素答案

【问题标题】：WinJS changing a template's element for a specedicitem in ListViewWinJS 更改 ListView 中特定项目的模板元素
【发布时间】：2013-04-03 20:38:12
【问题描述】：

我们开始吧，这是我的问题，我找不到任何可以解决的问题。我的 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>

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

【问题讨论】：

标签： javascript data-binding microsoft-metro winjs

【解决方案1】：

我认为最好的选择是使用 MVVM 方法：将每个项目绑定到一个实体并让该实体公开一个名为 Text 的可观察属性，将 Flyout 绑定到另一个可观察属性 SelectedItem，该属性将使用当前选定的项目进行更新，并使用两个-方式绑定以在弹出文本输入更改时更新所选项目的 Text 属性。如果您需要它，我在博客中介绍了两种绑定方式：http://codeworks.it/blog/?p=81

【讨论】：

对这个建议想了很多，它很有帮助，我想到了 MVVM，但我很忙于理解新概念。我会测试一下。
如果您有兴趣，我创建了一个小型 MVVM 框架：mvvmstack.codeplex.com

【解决方案2】：

建议在弹出的 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

【讨论】：