input value not visible

[kashirin-alex]

Hello, Unable to figure out why is the value of input text type is not being visible (value="v" is set while nothing seen, on any browsers)

It is with template.link follow observeAll. here is a link to the issue, https://thither.direct/store/id/1S?page=1&MPN=W0133-171&length=10&CAT=a21-b191-&view=products&keyWords=2005-2011&

the actual field values of MPN,CAT,keyWords are set on the left-side inputs while none are shown as input's values.

Thank You, Kashirin Alex

[BorisMoore]

It must be some error in how you are using JsViews. But for me to help you would need to create a minimalistic self-contained sample page (preferably a working jsfiddle) which shows the problem, and with all other irrelevant code and content removed. I cannot debug into your real app, it takes too long...

Also I am on vacation travelling, so will have very little time if any in the next two weeks to look more closely, With a jsfiddle if I see the problem right away I can let you know. Otherwise it will be after I return...

[kashirin-alex]

Here is a minimal version of the same issue, 1) when template link used, the Values are not visually initiated (input's value= is there) 2) when template render used, the inputs change is not observed (link usage required), while the input values are seen.

• lines 63 and 64 is the template execution

https://jsfiddle.net/vdgnepwk/1/

Hope, It is easier to debug now.

and here is a complete light version https://jsfiddle.net/vdgnepwk/2/ -- the only thing is, why would the "value one" not shown on initiation while the placeholder "title" is in place.

Thank You, Kashirin Alex

[BorisMoore]

OK - well you are not using the correct syntax at all for data-linking elements, or two-way binding. See for example the doc topics

• http://www.jsviews.com/#linked-elem-syntax
• http://www.jsviews.com/#link2way
• http://www.jsviews.com/#link-input

In your case if you want to bind to .v you write:

<input type="text" data-link="prop.v".../>

You can also use full data-link syntax to data-link to other targets such as placeholder:

<input type="text" data-link="{:prop.v:} name{:key} placeholder{:prop.t}" class="form-control"  />

[Paul-Martin]

I'm not exactly sure what you are trying to achieve, but at least part of the problem is that you are not data-link'ing the values when using jsviews with $.link:

With jsrender you can bind attributes 'inline':

<input type="text" name="{>key}" value="{>prop.v}"... etc .. >

WIth jsviews you want to data-link the attributes

The {:prop.v:} indicates two way binding to the value of the input via the colon on each side. The name{:key} indicates one way binding to the name attribute.

Hope that helps

On Aug 26, 2016, at 11:20 AM, Kashirin Alex notifications@github.com wrote:

Here is a minimal version of the same issue, 1) when template link used, the Values are not visually initiated (input's value= is there) 2) when template render used, the inputs change is not observed (link usage required), while the input values are seen.

https://jsfiddle.net/vdgnepwk/1/

Hope, It is easier to debug now.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kashirin-alex]

Correct me if wrong, Actual data-binding is the data-link . Data-link obj is the directive for the other obj in the linked-data obj.

And of-course there is meaning of linking value as field-name .

The whole thing is all good except the browser's rendering of the value="the correct value " to the visual.

[kashirin-alex]

Regards, the prop.v it is the child of prop.n(key)

On Aug 26, 2016 8:09 PM, "Paul Martin" notifications@github.com wrote:

I'm not exactly sure what you are trying to achieve, but at least part of the problem is that you are not data-link'ing the values when using jsviews with $.link:

<input type="text" data-link="{:prop.v:} name{:key}" class="form-control" placeholder="{{>prop.t}}" value="" />

With jsrender you can bind attributes 'inline':

<input type="text" name="{>key}" value="{>prop.v}"... etc .. >

WIth jsviews you want to data-link the attributes <input type="text" data-link="{:prop.v:} name{:key}" class="form-control" placeholder="{{>prop.t}}" value="" />

The {:prop.v:} indicates two way binding to the value of the input via the colon on each side. The name{:key} indicates one way binding to the name attribute.

Hope that helps

On Aug 26, 2016, at 11:20 AM, Kashirin Alex notifications@github.com wrote:

Here is a minimal version of the same issue, 1) when template link used, the Values are not visually initiated (input's value= is there) 2) when template render used, the inputs change is not observed (link usage required), while the input values are seen.

https://jsfiddle.net/vdgnepwk/1/

Hope, It is easier to debug now.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/BorisMoore/jsviews/issues/347#issuecomment-242793683, or mute the thread https://github.com/notifications/unsubscribe-auth/AE61BWtNNkc_4h4pyoJbQBO5cGRf8q5Tks5qjx3PgaJpZM4JuBR- .

[Paul-Martin]

There are two ways to datalink in jsviews:

{^{>someProperty /}}

or

both are functionally equivalent.

However for inputs we need to bind logically to the 'value' attribute. That can only be done using the second syntax:

Binding can be done directionally. One can control the direction by specifying the ':' operator:

// bind such that only observable updates to someProperty are reflected in the input

// bind such that observable updates to someProperty are reflected in the input // and updates to the input are reflected in someProperty

// bind such that updates to someProperty are not reflected in the input // and updates to the input are reflected in someProperty

In all 3 examples the location of the ':' (beginning or end or both) defines the direction the binding.

observable means you must use $.observable() in order for the the binding to update the bound element.

var foo { someProperty : 'bar' };

// this statement observably updates someProperty, such that all bound // elements are updated $.observable(foo).setProperty('someProperty', 'newbar');

// this input would be updated

// this statement does not observably update someProperty foo.someProperty = 'notupdated';

// this input would not be updated

In your template you have something similar to:

{^{props foo }} // this span is not directly data-linked {{>key}}: {{>prop}} {{/props}}

{^{props}} is an iterator for objects.

In this example, it will be redrawn when foo is observably modified: $.observable(foo).setProperty('someProperty', 'thischanges'); $.observable(foo).removeProperty('someProperty');

On Aug 26, 2016, at 2:22 PM, Kashirin Alex notifications@github.com wrote:

Correct me if wrong, Actual data-binding is the data-link . Data-link obj is the directive for the other obj in the linked-data obj.

And of-course there is meaning of linking value as field-name .

The whole thing is all good except the browser's rendering of the value="the correct value " to the visual.

On Aug 26, 2016 8:09 PM, "Paul Martin" notifications@github.com wrote:

I'm not exactly sure what you are trying to achieve, but at least part of the problem is that you are not data-link'ing the values when using jsviews with $.link:

<input type="text" data-link="{:prop.v:} name{:key}" class="form-control" placeholder="{{>prop.t}}" value="" />

With jsrender you can bind attributes 'inline':

<input type="text" name="{>key}" value="{>prop.v}"... etc .. >

WIth jsviews you want to data-link the attributes <input type="text" data-link="{:prop.v:} name{:key}" class="form-control" placeholder="{{>prop.t}}" value="" />

The {:prop.v:} indicates two way binding to the value of the input via the colon on each side. The name{:key} indicates one way binding to the name attribute.

Hope that helps

On Aug 26, 2016, at 11:20 AM, Kashirin Alex notifications@github.com wrote:

Here is a minimal version of the same issue, 1) when template link used, the Values are not visually initiated (input's value= is there) 2) when template render used, the inputs change is not observed (link usage required), while the input values are seen.

https://jsfiddle.net/vdgnepwk/1/

Hope, It is easier to debug now.

— You are receiving this because you are subscribed to this thread.

Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/BorisMoore/jsviews/issues/347#issuecomment-242793683, or mute the thread https://github.com/notifications/unsubscribe-auth/AE61BWtNNkc_4h4pyoJbQBO5cGRf8q5Tks5qjx3PgaJpZM4JuBR- . — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[BorisMoore]

Just a request. I find it much better to reply to issue comments by going to the GitHub issue, and adding comment there. You can get Markdown formatting to work correctly, and you can see other people's comments. Replying to comments by replying directly to the email notification works very badly. It shows up as new comments but without correct formatting, and if you insert inline comments in the other persons previous email, then your added inline comments get lost in the '...' section on GitHub Issues itself and are not seen at all.

Also, Alex, make sure to read the relevant documentation topics. There are many examples and explanations. Those doc topics are there to avoid needing to give repeat explanations here, or create issues which can be in fact avoided by reading the relevant docs. I pointed you to these topics, to start with:

• http://www.jsviews.com/#linked-elem-syntax
• http://www.jsviews.com/#link2way
• http://www.jsviews.com/#link-input

and there are are many more, e.g. on {{props}} and other API features you are using.

• http://www.jsviews.com/#jsvpropstag

Once you have done full exploration of docs and samples, then you can create an issue if necessary...

[kashirin-alex]

Thank You, got it working - https://jsfiddle.net/vdgnepwk/3/ keeping, key as link and the field-name as if a regular form post will work. :key: as two way binding