Question

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

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

如何使用带有Jade的meteor-blaze复制相同的功能，即输入字段更改事件将更新相应的帮助程序。

更新

以下是我在Blaze和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

让我在＆＃34; spacebars＆＃34;中回答你的问题。我认为你应该能够把它翻译成＆＃34; jade＆＃34;容易。首先确保添加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());
  }
});

原因是这样的＆＃34;复杂＆＃34;是因为Meteor不提供内置的双向数据绑定支持。这并不意味着它不能像上面的例子那样完成。

您可以在此处阅读有关流星食谱中双向数据绑定的更多信息：

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

Answer 2

根据Michel Floyd的指导，以下是工作代码：

玉模板：

.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);
    }
});

Blaze动态数据绑定

2 个答案: