with: <binding-object>

优质
小牛编辑
139浏览
2023-12-01

此绑定用于绑定指定对象上下文中对象的子元素。 此绑定也可以与其他类型的绑定嵌套,例如if和foreach。

Syntax

with: <binding-object>

Parameters

  • 将要用作绑定子元素的上下文的对象作为参数传递。 如果传递的对象或表达式被评估为null或未定义,则不会显示子元素。

  • 如果提供的参数是可观察的参数,则将重新评估表达式。 相应地,将基于刷新的上下文结果重新处理子元素。

Example

让我们看一下下面的例子,它演示了如何使用with binding。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS with binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   <body>
      <h1 data-bind = "text: siteName"> </h1>
      <table border = "1">
         <thead>
            <th>Course Name</th><th>Fees</th><th> Start Date</th>
         </thead>
         <tbody data-bind = "with: courses ">
            <tr>
               <td><span data-bind = "text: courseName"></span></td>
               <td><span data-bind = "text: Fees"></span></td>
               <td><span data-bind = "text: startDate"> </span></td>
            </tr>
         </tbody>
      </table>
      <script type="text/javascript">
         function AppViewModel() {
            self = this;
            self.siteName = ko.observable( 'xnip');
            self.courses = ko.observable ({
               courseName:  'Microsoft .Net', 
               Fees: 20000, startDate: '20-Mar-2016'
            });
         };
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

让我们执行以下步骤来查看上述代码的工作原理 -

  • 将以上代码保存在with-bind.htm文件中。

  • 在浏览器中打开此HTML文件。

观察 (Observations)

Container-less with

可能存在无法在DOM元素中放置数据绑定的情况。 基于注释标记,仍然可以在无container-less语法的帮助下执行基本绑定,如以下代码所示。

<ul>
   <li>Course Info</li>
   <!-- ko with: currentClasses -->
      ...
   <!-- /ko -->
   <!-- ko with: plannedClasses -->
      ...
   <!-- /ko -->
</ul>

和用作开始和结束标记,使其成为虚拟语法,并将数据绑定为真正的容器。