使用视图名称或占位符名称获取数据对象答案

【问题标题】：Getting the data object by using view name or place holder name使用视图名称或占位符名称获取数据对象
【发布时间】：2014-10-31 22:52:19
【问题描述】：

我正在使用 jsView (v1.0.0-alpha)

我在从视图中获取数据时遇到问题。让我有以下代码。（我在这里创建了一个简化版本 http://jsfiddle.net/j5oc0svg/ ）我正在尝试使用占位符名称获取我之前绑定到视图的数据对象。它总是返回'undertified'。如果我调用 $.view().views 那么我可以看到我之前绑定的视图和数据。

如何使用占位符或（视图名称？）获取绑定到视图的数据？

提前致谢。

<!DOCTYPE html>        
<html>
<head>
  <script src="http://code.jquery.com/jquery.js"></script>
  <base href="http://www.jsviews.com/samples/"/>
  <link href="samples.css" rel="stylesheet"/>
  <script src="../download/jsviews.js"></script>
</head>
<body>

<table><tbody id="peopleList"></tbody></table>

<script id="personTmpl" type="text/x-jsrender">
  <tr>
    <td>Name</td>
    <td>{{:name}}</td>
  </tr>
</script>

<script>

           $.ajax({
                url: "http://localhost:4728/api/People/,
                dataType: 'json'
            }).done(function (data) {
                if (data!= null) {
                    var template = $.templates("#personTmpl");
                    template.link("#peopleList", data);
                }
            }).fail(function (exception) {
                console.log(exception.message);
            });


           // Let's say this code is in button on click or push subscriber 
           hub_proxy.client.UpdateSomething = function (someArgs) {
                  var data = $.view('#peopleList').data; //underfined.
           }

</script>

</body>
</html>

【问题讨论】：

你没有任何数据属性，所以数据属性是未定义的？
no.. 如果您查看此链接 (jsviews.com/#jsvplaying)，它具有类似的代码。 $("#peopleList").on("click", ".changeBtn", function() { var dataItem = $.view(this).data; $.observable(dataItem).setProperty("name", dataItem. name + counter++); }).. "$.view(this.data)" 在没有 data 属性的情况下工作。

标签： javascript jquery-templates jsrender jsviews

【解决方案1】：

您似乎错过了 jsView 中的 Views 是（某种）复合体的事实：换句话说，每个 View 对象可能包含一组内部视图，等等。

使用$.view(selector)，您可以检索包含selector 元素的最外层视图。对于#peopleList，它只是其他视图的容器，没有自己的数据。在这种情况下，您可能要寻找的最里面的 View 仍然在范围内具有 #peopleList：这是通过将 $.view() 的 inner 参数设置为 true 来完成的：

console.log( $.view('#peopleList', true) ); // Array of Objects

或者，您可以只为每一行指定一个特定的数据对象：

console.log( $.view('#peopleList tr:eq(0)').data ); // Object {name: "Adriana"} 
console.log( $.view('#peopleList tr:eq(1)').data ); // Object {name: "Robert"}

Demo。我在这里使用:eq 选择器只是为了说明；但您始终可以为视图指定名称，然后在选择器中引用它。

【讨论】：

谢谢！实际上，我喜欢获取我绑定的“人”对象。不是单个对象。如果您查看 $.view().views (console.log( $.view('#peopleList').views);) 那么您会看到 'people' 对象。这就是我喜欢得到的对象。不是单独的行。
是的，我在更新中考虑到了这一点。顺便说一句，你检查过那个图书馆的source code 吗？看起来最多的文档在里面。 )
太棒了！非常感谢！我也会检查代码。 :) 再次感谢。

【解决方案2】：

是的，raina77ow 的回答很好。

更多获取特定数据的方法，例如对于这种情况，您首先要获取传递给link() 的数组：

// Get the nearest ancestor view for an array, and hence the data
var arr = $.view('#peopleList tr').get("array").data;

// Get the top-level view created by the link view or render call (In this case, this is the "array" view)
var arr = $.view('#peopleList tr').get().data;

// Get the top-level data that was passed to the link or render method (In this case, also the array)
var arr = $.view('#peopleList tr').ctx.root;

我在这里分叉了raina77ow 的演示并添加了这些替代方案：http://jsfiddle.net/BorisMoore/p9mfmb3r/

顺便说一句，查看单元测试也是一个很好的灵感来源：

https://github.com/BorisMoore/jsviews/tree/master/test/unit-tests

【讨论】：

谢谢鲍里斯！为什么我们需要使用 'view('#peopleList tr')' (with tr) 或 '$.view('#peopleList', true)'？在我的情况下，为什么我们不能只使用 '$.view('#peopleList').data' ？您能否分享一下不支持'$.view('#peopleList').data' 背后的技术原因？谢谢！
视图是渲染模板的一个实例。 $.view(someElemOrSelector) 获取呈现该元素的视图。见jsviews.com/#jsobservable。 #peopleList 元素不是由您的模板/数据呈现的，因此它的视图是顶级视图 - 与您的数据无关。对于您的渲染视图，要么选择一个由您的模板渲染的元素，以找到渲染它的“项目”视图（或“数组”视图 - 两个项目视图的父级），或者调用 '$.view('#peopleList ', true) 来查找与#peopleList 元素的内容相关联的第一个“内部”视图。
我明白了。注意.. 行为与 WPF/Sivlerlight 数据模板有点不同。在 SL（例如michaelsync.net/2011/12/22/…）中，我们可以从我们绑定的控件中取回数据。（例如