mikeric / rivets

Lightweight and powerful data binding.

Home Page:http://rivetsjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

rv-value not evaluated in option tag

ngelx opened this issue · comments

commented

Hi, i'm having some troubles understanding why the following piece of backbone + rivets code is not working as expected.

Model.coffee

class ConditionModel extends Backbone.DeepModel
  defaults: {
    action: null
    value: null
  }

View.coffee (BoundView)

class ConditionView extends BoundView
  el: "#conditionDiv"
  model: ConditionModel
  conditions: []

  initialize: ->
    @conditions = MainApp.getTemplatesRange()

  render: ->
    super()

where MainApp.getTemplatesRange is something like:

MainApp.getTemplatesRange.results = [Object { id="1",  name="show"}, Object { id="2",  name="hide"}]

template

<div id='conditionDiv'>
  <div class=''>
    <select rv-value="model:action">
      <option rv-each-result="view.conditions.results" rv-value="result.id">{ result.name }</option>
    </select>
  </div>
  <div class=''>
    <input type='text' rv-value="model:value"/>
  </div>
</div>

The generated html is

<div id="conditionDiv">
      <div class="">
          <select rv-value="model:action">
               <option rv-value="result.id" value="">show</option>
               <option rv-value="result.id" value="">hide</option>
         </select>
     </div>
    <div class="">
       <input type="text" rv-value="model:evalOptions">
    </div
</div>

note that the value in options tags are empty, instead of being the actual result.id.

Some observations

  • model is correctly 2-way binded
  • rv-each is iterating over the view.conditions.results correctly and interpolating the name correctly too.

What i'm doing wrong? Any help will be much appreciated.

Thanks in advance,

model:action

I'm not experienced with Backbone but have you registered custom adapter for : operator?

commented

hey @Namek thanks for mention it. I've completed forget to add to the original description. Here is my adapter, in a fact, the whole rivets-config.coffee

rivets.configure
  prefix: "rv"
  preloadData: true
  # Since rivets 0.9 functions are not automatically executed in expressions. If you need backward compatibilty, set this parameter to true
  executeFunctions: true
  rootInterface: '.'
  templateDelimiters: ['{', '}']
  handler: (target, event, binding) ->
    this.call(target, event, binding.view.models)

rivets.binders.input =
  publishes: true
  routine: rivets.binders.value.routine
  bind: (el) ->
    $(el).on('input', this.publish)
  unbind: (el) ->
    $(el).off('input')

rivets.formatters.customclass = (value) ->
  return "custom_" + value

rivets.adapters[':'] =
  observe: (obj, keypath, callback) ->
    obj.on('change:' + keypath, callback)
  unobserve: (obj, keypath, callback) ->
    obj.off('change:' + keypath, callback)
  get: (obj, keypath) ->
    if keypath.indexOf('[') >-1
      _index = keypath.indexOf('[')
    return obj.get(keypath)
  set: (obj, keypath, value) ->
    obj.set(keypath, value)
  1. to me it looks more like a StackOverflow question than rivets issue.
  2. "not working as expected" doesn't explain anything
  3. plunker / jsfiddle
commented

I though it was clear enough, but maybe it was too deep into the description. The issue was that:

note that the value in options tags are empty, instead of being the actual result.id

In any case, you are right, it may be more suitable asking into stack Overflow.

Thanks @Namek for your time.

PS: I'm closing it as I've figured it out another way to do it using the _ template.

I tried to reproduce (simplified) the issue here: http://codepen.io/blikblum/pen/bwBZxw?editors=1010#0

It works, but i'm interested in narrowing the issue and would examine deeper a plunker / codepen / jsfiddle showing the problem