从列表中选择一个后,将文本附加到输入

时间:2014-11-25 15:43:51

标签: ractivejs

<input type="submit" on-click='toggle("Dropdown")'>
<input type="text" value="{{category.name}}">
{{#if Dropdown}}
  <div class="dropdown">
    <ul>
      <li><a href="#" on-click="select">Custard Pudding</a></li>
      <li><a href="#" on-click="select">Coffee Pudding</a></li>
    </ul>

{{/if}}

ractive.on('select', function(event) {

    this.observe( 'category.name', function ( newValue, keypath ) {
        this.set( keypath, '' + newValue );
    });
})

在JQuery $('dropdown a').text()中理解并将其附加到输入将起作用。 我唯一的问题是如何抓取文本并在点击“选择”时将其设置为输入。搜索过示例并试过但它没有做任何事情。也许方法是错误的。

请帮忙

1 个答案:

答案 0 :(得分:0)

您可以从event.node获取价值:

ractive.on('select', function(event) {
    this.set( 'category.name', '' + event.node.textContent );
})

你也可以内联:

<li><a href="#" on-click="set('category.name', '' + event.node.textContent)">Custard Pudding</a></li>

但如果<li>是从数据生成的(或者你可以这样做),你可以直接设置

<input type="submit" on-click='toggle("Dropdown")'>
<input type="text" value="{{category.name}}">
{{#if Dropdown}}
  <div class="dropdown">
    <ul>
      {{#each ['Custard Pudding', 'Coffee Pudding'] }}
      <li><a href="#" on-click="set('category.name', this)">{{this}}</a></li>
      {{/each}}
    </ul>

{{/if}}