动态数据绑定

Question

下面是简单输入字段模型绑定的角度示例。

<div ng-app>
  <div>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <h1>Hello {{yourName}}!</h1>
  </div>
</div>

如何使用Jade使用流星火焰复制相同的功能，即输入字段更改事件将更新相应的助手。

更新

下面是我在“烈火与玉石”中的代码：

.form-group
 lable 
 | Click buttons to increase their values:
 input#user(type="text")
 span 
 |{{usernameinput}}

以下是javascript代码：

Template.unitconversion.helpers({
    'nm': function(){ return "100" }
});

Template.unitconversion.events({  
    'keyup #user': function(evt, tmpl){
        var tor = tmpl.find('#user').value;
        console.log(tor);       
        //console.log(evt);
        //console.log(tmpl);

        Template.unitconversion.helpers({           
            'usernameinput': function()
            {               
                return tor
            }
        });
    }
});

当用户输入被更改时，我期望助手函数更新'usernameinput‘，但是什么都没有发生。每当输入字段更改时，我都会得到预期的控制台输出。

如果能解决这个问题，我们将不胜感激。

Answer 1

让我用“空格键”回答你的问题。我想你应该能很容易地把它翻译成“玉”。首先，请确保添加了reactive-dict包：

meteor add reactive-dict

它比您预期的要复杂一些，但是下面的代码应该能很好地完成这项工作：

<template name="hello">
  <h1>Wellcome {{myName}}!</h1>
  <p>
    Tell your name <input type="text" name="myName" value="{{myName}}"/>
  </p>
</template>

以及相应的javascript

Template.hello.onCreated(function () {
  this.state = new ReactiveDict();
});

Template.hello.helpers({
  myName: function () {
    return Template.instance().state.get('myName');
  },
});

Template.hello.events({
  'keyup input[name]': function(e, t) {
    t.state.set($(e.target).attr('name'), $(e.target).val());
  }
});

之所以如此“复杂”，是因为Meteor没有提供内置的双向数据绑定支持。这并不意味着它不能像上面的例子所显示的那样。

您可以在流星食谱中阅读更多关于双向数据装订的内容：

https://github.com/awatson1978/meteor-cookbook/blob/master/cookbook/data-binding.md#two-way-data-binding-1

Answer 2

根据米歇尔·弗洛伊德的指导意见，以下是工作守则：

翡翠模板：

.form-group    
   lable 
     | Click buttons to increase their values:
   input#user(type="text")
   span
     | {{usernameinput}}

Javascript：

var usernameinput = new ReactiveVar(0);

Template.unitconversion.helpers({
    usernameinput: function(){ return usernameinput.get();
    }
});

Template.unitconversion.events({  
    'keyup #user': function(evt, tmpl){
        var tor = tmpl.find('#user').value;
        console.log(tor);
        usernameinput.set(tor);
    }
});