Javascript jsViews中双向dat绑定的验证

试图找到一种优雅的方法来处理jsViews模板中双向数据绑定属性的验证客户端。作为参考示例，请查看jsView API链接中jsViews双向绑定的PI文档：

在使用新值更新视图之前，我希望在更新属性时验证“名称”。任何示例/指导/想法都将不胜感激

---

谢谢，试试看。这是一个非常易于使用的javascript库，用于执行各种验证。

我找到了我想要的答案。我使用的版本在使用$.observable和/或更新属性时没有cancel方法。解决方案如下：

当我处于更改属性设置的模式时，我设置了一个全局属性，以便onBeforeChange事件返回false。然后，我对用户输入的新值进行验证。如果它通过了验证，我将通过observable、setProperty更新它，然后关闭全局设置。这允许投标在视图中相应地更新，但在验证发生之前不更新

下面是一个简单的例子

 <table><tbody id="pageList"></tbody></table>

 //template for the table
 <script id="pageTmpl" type="text/x-jsrender">  
  {^{for pages}}
    <tr>
       <td data-link="name"></td>
       <td>
          <input data-link="name" class="page-names"/>
       </td>
       <td>
         <button id="save" class="saveCmd">Save</button>           
         <button id="cancel"  class='cancelCmd'>Cancel</button>                      
       </td>
    </tr>
  {{/for}}
 </script>

//表格的模板
{^{对于页面}}
拯救
取消
{{/for}}

以及推动它的javascript：

  var isModal = true;
  $.views.helpers({
    onBeforeChange: function(ev, data)
    {            
               //this would be global setting if in a modal              
               if(isModal)          
               {                
                  return false;   
                }
    },
    onAfterChange: function (ev, data)
    {           
       //this would be global setting if in a modal 
              if(isModal)           
              {                
                return false;   
              }
            }
         });


   $(document).ready(function(){      
   //not used at moment!!!
   $(".saveCmd").on("click", function(){         
      var dataItem = $.view(this).data,
          newVal   = $(this).parent().parent().find('input').val();

      //validate newValue
      if(!ValueIsValid(newVal))
      {
           alert("Must be 10 characters or less!");   
      }
      else
      {
         isModal = false;
         $.observable(dataItem).setProperty("name", newVal);            
         isModal = true;

      }
   });
   $(".cancelCmd").on("click", function(){
      var dataItem = $.view(this).data;         
      $(this).parent().parent().find('input').val(dataItem.name);          
   });
});

  //KETHCUP VALIDATION FUNCTION mock example
  function ValueIsValid(val)
  {       
   return val.length < 11;
  }

//variables and setup for initial objec.
var myTemplate = $.templates("#pageTmpl");

var pages = [
{
  name: "Q100"
},
{
  name: "Q200"
}
];

var app = {
 pages: pages
};

var counter = 1;

myTemplate.link("#pageList", app);    

var isModal=true；
$.views.helpers({
onBeforeChange：功能（ev、数据）
{            
//如果处于模式，这将是全局设置
if（isModal）
{                
返回false；
}
},
onAfterChange：功能（电动汽车，数据）
{           
//如果处于模式，这将是全局设置
if（isModal）
{                
返回false；
}
}
});
$（文档）.ready（函数（）{
//暂时不用！！！
$（.saveCmd”）。在（“单击”，函数（）{
var dataItem=$.view（this）.data，
newVal=$（this.parent（）.parent（）.find（'input'）.val（）；
//验证新值
如果（！ValueIsValid（newVal））
{
警报（“必须少于10个字符！”）；
}
其他的
{
isModal=假；
$.observable（dataItem）.setProperty（“名称”，newVal）；
isModal=真；
}
});
$（.cancelCmd”）。在（“单击”，函数（）上{
var dataItem=$.view（this）.data；
$（this.parent（）.parent（）.find（'input'）.val（dataItem.name）；
});
});
//KETHCUP验证函数模拟示例
函数值有效（val）
{       
返回值长度<11；
}
//初始对象的变量和设置。
var myTemplate=$.templates（“#pageTmpl”）；
变量页=[
{
名称：“Q100”
},
{
名称：“Q200”
}
];
变量应用={
页数：页数
};
var计数器=1；
链接（“页面列表”，app）；

---

链接到fiddle上的演示：

现在jsviews.com上有许多示例显示了一种验证方法

• l
• -验证控件的基类
• （如何将验证组控件与单步执行向导关联使用。本例中碰巧使用了日期选择器）

---

该问题是通过返回false解决的，它会导致JSView中的“onBeforeChange”事件。因此，我们有一个开关，如果触发了验证，该开关将打开，并且不允许对绑定元素进行更新。验证完成后，我们将关闭该开关，“onBeforeChange”将贯穿整个过程。我对这个问题上的混乱表示歉意，但需要解决的不是验证问题，而是如何在双向绑定中中断JSView更新数据绑定对象。谢谢大家的帮助

谢谢你，伙计！我还没有得到任何回应，并且用不同的方式解释了三次类似的问题。我们正在使用的验证已经实现，并且大部分都在工作。我只需要知道如何停止onAfterChange事件向视图的传播，并进行验证，然后允许视图更新绑定属性。不知道为什么会引起这么多问题。。再次感谢，我会查出来的。