zoukankan      html  css  js  c++  java
  • Meteor Blaze

    Blaze是Meteor 软件包用于构建现场反应模板。
    Render方法

    这种方法被用于绘制模板到DOM。首先,我们将创建 myNewTemplate 之后渲染。 我们增加 myContainer 这将用来作为父元素的容器,所以render方法知道在何处呈现我们的模板。

    meteorApp/client/app.html

    <head>
       <title>meteorApp</title>
    </head>
     
    <body>
       <div id = "myContainer">
       </div>
    </body>
    
    <template name = "myNewTemplate">
       <p>Text from my new template...</p>
    </template> 

    下一步,我们将创建渲染功能这将需要两个参数。第一个是将要渲染的模板,第二个是,我们上面提到的父元素。

     

    meteorApp/client/app.js

    Meteor.startup(function () {
       if(Meteor.isClient) {
          var myNewTemplate = Template.myNewTemplate;
          var myContainer = document.getElementById('myContainer');
          Blaze.render(myNewTemplate, myContainer);
       }
    });
    

    渲染数据

    如果需要被动地传递一些数据,你可以使用 renderWithData 方法。 HTML和前面的例子完全相同。

     

    meteorApp/client/app.html

    <head>
       <title>meteorApp</title>
    </head>
     
    <body>
       <div id = "myContainer">
       </div>
    </body>
    
    <template name = "myNewTemplate">
       <p>Text from my new template...</p>
    </template> 

    我们可以在Meteor.renderWithData方法的第二个参数添加数据。其它两个参数和之前的实例相同,在这个例子中我们的数据将用于记录一些文本的功能。

     

    meteorApp/client/app.js

    Meteor.startup(function () {
    
       if(Meteor.isClient) {
          var myNewTemplate = Template.myNewTemplate;
    		
          var myData = function() {
             console.log('Log from the data object...')
          }
    		
          var myContainer = document.getElementById('myContainer');
          Blaze.renderWithData(myNewTemplate, myData, myContainer);
       }
    	
    });
    

    删除方法

    我们可以添加 remove

    meteorApp/client/app.html

    <head>
       <title>meteorApp</title>
    </head>
     
    <body>
       <div id = "myContainer">
       </div>
    </body>
    
    <template name = "myNewTemplate">
       <p>Text from my new template...</p>
    </template> 

    在这个例子中,我们将在三秒钟后移除模板。请注意,我们使用 Blaze.Remove方法 除去模板。

    meteorApp/client/app.js

    Meteor.startup(function () {
       if(Meteor.isClient) {
          var myNewTemplate = Template.myNewTemplate;
          var myContainer = document.getElementById('myContainer');
          var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);
    
          Meteor.setTimeout(function() {
             Blaze.remove(myRenderedTemplate);}, 3000);
       }
    });
    
    下表显示了可使用的其他方法。
    S.No.
    方法与细则
    1

    Blaze.getData([elementOrView])

    用于从渲染元素检索数据。
    2

    Blaze.toHTML(templateOrView)

    用于渲染模板或视图字符串。
    3

    Blaze.toHTMLWithData(templateOrView, data)

    用于渲染模板或视图字符串附加数据。
    4

    new Blaze.View([name], renderFunction)

    用于创建新 Blaze 反应性的DOM部分。 

    5

    Blaze.currentView

    用于获取当前视图。
    6

    Blaze.getView([element])

    用于获取当前视图。
    7

    Blaze.With(data, contentFunc)

    用于构造呈现一些内容与上下文的视图。
    8

    Blaze.If(conditionFunc, contentFunc, [elseFunc])

    用于构造呈现一些有条件的内容的视图。
    9

    Blaze.Unless(conditionFunc, contentFunc, [elseFunc])

    用于构造呈现一些有条件的内容(反转Blaze.if)的视图。
    10

    Blaze.Each(argFunc, contentFunc, [elseFunc])

    用于构建为每个项目呈现 contentFunct 的视图。

    11

    new Blaze.Template([viewName], renderFunction)

    使用名称和内容构建新的Blaze视图。
    12

    Blaze.isTemplate(value)

    如果值是一个模板对象则返回true。
  • 相关阅读:
    遍历DataTable内存数据的三种方法性能对比 dataTable.Select优先选择
    swf交互(中)LocalConnection
    在导入数据到sde之前判断sde是否安装,以及sde许可是否可用
    swf之间的交互(上)全局变量VS全局派发事件
    vs sql等帮助文档不显示
    检查sde数据库中的空间表结构通mdb表结构是否相同的思路
    datagrid 追加列号
    .net下的各种数据库的连接方法
    APP 上线Bundle identifier 创建
    APP 上线测试证书的制作(调试证书)
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7389980.html
Copyright © 2011-2022 走看看