Getting the data object by using view name or place holder name

Question

I am using jsView (v1.0.0-alpha)

I am having an issue in getting the data from the view. Let's I have the following code. (I created a simplified version here http://jsfiddle.net/j5oc0svg/ ) I am trying to get the data object that I bind to the view earlier by using the place holder name. It's always return 'undertified'. If I called $.view().views then I can see the view and the data that I bind earlier.

How can I get the data that bind to the view by using the placeholder or (view name?)?

Thanks in advance.

<!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>

You don't have any data attributes, so the data property is undefined ? — adeneo, Sep 07 '14 at 15:51
no.. if you look at this link (http://www.jsviews.com/#jsvplaying), it has the code like that. $("#peopleList").on("click", ".changeBtn", function() { var dataItem = $.view(this).data; $.observable(dataItem).setProperty("name", dataItem.name + counter++); }).. "$.view(this.data)" works without having the data attribute. — Michael Sync, Sep 07 '14 at 16:07

score 2 · Answer 1 · answered Sep 07 '14 at 17:26

2

Yes, the answer from raina77ow is a good answer.

A couple more ways of getting to specific data, e.g. for this case where you are looking to obtain the array you passed in to link() in the first place:

// 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;

I forked raina77ow's demo here and added those alternatives: http://jsfiddle.net/BorisMoore/p9mfmb3r/

BTW looking at the unit tests can also be a good source of ideas:

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

answered Sep 07 '14 at 17:26

BorisMoore

8,444
1
16
27

Thanks Boris! Why do we need to use 'view('#peopleList tr')' (with tr) or '$.view('#peopleList', true)'? Why can't we just use '$.view('#peopleList').data' in my case? Could you please share the technical reason behind for not supporting '$.view('#peopleList').data'? Thanks! – Michael Sync Sep 08 '14 at 02:52
1

A view is an instance of a rendered template. $.view(someElemOrSelector) gets the view that rendered that element. See http://www.jsviews.com/#jsobservable. The #peopleList element was not rendered by your template/data, so its view is the top-level view - not associated with your data. For your rendered views, either choose an element that was rendered by your template to find the "item" view that rendered it (or the "array" view - parent to the two item views) or call '$.view('#peopleList', true) to find the first 'inner' view associated with the content of the #peopleList element. – BorisMoore Sep 08 '14 at 04:55
I see. Noted.. The behavior is a bit different WPF/Sivlerlight data template then. In SL (e.g. http://michaelsync.net/2011/12/22/silverlight-5-mvvm-got-more-fun-with-implicit-data-templates), we can get the data back from the control that we bind. (e.g. – Michael Sync Sep 08 '14 at 06:35

raina77ow · Accepted Answer · 2014-09-07T16:31:34.407

1

You seem to miss the fact that Views in jsView are (sort of) Composites: in other words, each View object may contain set of internal Views, among other things.

With $.view(selector) you retrieve the outer-most View that contains the selector element. For #peopleList, it's just an container for other Views, with no own data. What you probably look for in this case is finding the inner-most View still having #peopleList in the scope: that's done with setting inner param of $.view() to true:

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

Alternatively, you can just go for a specific data object for each row:

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

Demo. I've used :eq selector here just for illustration; but you can always assign a name to a view, then refer to it in the selector.

edited Sep 07 '14 at 16:31

answered Sep 07 '14 at 16:08

raina77ow

103,633
15
192
229

Thanks! Actually, I like to get the 'people' object that I bind. Not the individual object. If you look at $.view().views (console.log( $.view('#peopleList').views);) then you see the 'people' object. That's the object that I like to get. not individual row. – Michael Sync Sep 07 '14 at 16:29
Yes, and I've taken this into account in my update. BTW, have you checked the [source code](http://www.jsviews.com/download/jsviews.js) of that library? Looks like the most documentation is inside. ) – raina77ow Sep 07 '14 at 16:32
Great! Thanks a lot! I will check the code as well. :) Thanks again. – Michael Sync Sep 07 '14 at 16:35

Getting the data object by using view name or place holder name

2 Answers2