Knockout.js knockoutjs奇怪/（也许我太笨了以至于无法理解）下拉行为_Knockout.js

Knockout.js knockoutjs奇怪/（也许我太笨了以至于无法理解）下拉行为

knockout.js

Knockout.js knockoutjs奇怪/（也许我太笨了以至于无法理解）下拉行为,knockout.js,Knockout.js,这是我目前正在编写的代码 <html> <head> @using MvcJqGrid; @using System.IO; @using System.Web.Mvc; @{ Layout = ""; } <link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery-ui.css" /> <link rel="Stylesheet" type="t

这是我目前正在编写的代码

<html>
<head>
@using MvcJqGrid;
@using System.IO;
@using System.Web.Mvc;
@{
    Layout = "";   
    }

<link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery-ui.css" />
<link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery.ui.base.css" />
<link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery.ui.theme.css" />
<link rel="Stylesheet" type="text/css" href="Content/ui.jqgrid.css" />

<script type="text/javascript" src="Scripts/modernizr.custom.05850.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.2.js" > </script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.19.js"> </script>
<script  type="text/javascript"  src="Scripts/grid.locale-en.js" ></script>
<script   type="text/javascript" src="Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="Scripts/json2.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>

</head>
<body>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<p>View Name: <input data-bind="value: sharepointView().Name" /></p>
<p>No Of Results: <input data-bind="value: sharepointView().noOfResultsPerPage"/></p>
<p id='filterEnable' >Filter Expression:Test</p>
<p id='addFilterExpression' >add Filter</p>
<div id='filterExpression'>   
<ul id='filterElements'>
</ul>
</div>

<script type="text/javascript">
    function AppViewModel() {
       //model binding dude
       this.sharepointView=ko.observable(@Html.Raw(PseudoSharepointView.getAView()));

       this.myOptions=(@Html.Raw(PseudoSharepointView.getAllVariables()));
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
</script>
<script type="text/javascript">

    $('#filterEnable').click(function () {
        $('#addFilterExpression').slideToggle('slow', function () {
            // Animation complete.
        });
    });

    $('#addFilterExpression').click(function () {

  $('#filterElements').append('<li>').append('<p>').html(" 
 <select data-bind='options: $root.myOptions'></select>
          ");
    });
</script>
</body>
</html>


@使用MvcJqGrid；
@使用System.IO；
@使用System.Web.Mvc；
@{
布局=”；
}
视图名称：
结果编号：
筛选器表达式：测试
添加筛选器


函数AppViewModel（）{
//模特儿
this.sharepointView=ko.observable（@Html.Raw（PseudoSharepointView.getAView（））；
this.myOptions=（@Html.Raw（PseudoSharepointView.getAllVariables（））；
}
//激活knockout.js
应用绑定（新的AppViewModel（））；
$（'#filterEnable'）。单击（函数（）{
$（'addFilterExpression'）。滑动切换（'slow'，函数（）{
//动画完成。
});
});
$（'#addFilterExpression'）。单击（函数（）{
$（'filterElements'）.append（'li>'）.append（'p>'）.html（'
");
});

现在“精选”的东西似乎让我头疼

当它按原样放入体内时，效果良好

但是，当我尝试使用jquery函数插入相同的内容时，我只得到一个空下拉列表……

您的javascript只是作为呈现的页面运行。尝试将javascript放入

文档中。准备好处理程序并重新排序函数调用：
<script type="text/javascript"> 
$(function () {
    var viewModel = null;
    function AppViewModel() { 
       //model binding dude 
       this.sharepointView=ko.observable(@Html.Raw(PseudoSharepointView.getAView())); 

       this.myOptions=(@Html.Raw(PseudoSharepointView.getAllVariables())); 
    } 

    $('#filterEnable').click(function () { 
        $('#addFilterExpression').slideToggle('slow', function () { 
            // Animation complete. 
        }); 
    }); 

    $('#addFilterExpression').click(function () { 

       $('#filterElements').append('<li>').append('<p>').html("<select data-bind='options: $root.myOptions'></select>"); 
       ko.applyBindings(viewModel, document.getElementById("filterElements"));
    }); 

    // Activates knockout.js 
    viewModel = new AppViewModel(); 
    ko.applyBindings(viewModel);
});

</script> 


$（函数（）{
var viewModel=null；
函数AppViewModel（）{
//模特儿
this.sharepointView=ko.observable（@Html.Raw（PseudoSharepointView.getAView（））；
this.myOptions=（@Html.Raw（PseudoSharepointView.getAllVariables（））；
} 
$（'#filterEnable'）。单击（函数（）{
$（'#addFilterExpression'）。滑动切换（'slow'，函数（）{
//动画完成。
}); 
}); 
$（'#addFilterExpression'）。单击（函数（）{
$（“#filterElements”）.append（“”）.append（“”）.html（“”）；
应用绑定（viewModel，document.getElementById（“filterElements”）；
}); 
//激活knockout.js
viewModel=新的AppViewModel（）；
应用绑定（视图模型）；
});

更新：您还需要对任何新创建的指定数据绑定
属性的DOM元素调用ko.applyBindings
。请参见上文中的$（“#addFilterExpression”）。单击
函数
无效。。。。。我实际上面临的问题如下。。。当我在标记中使用它时效果很好，下拉列表按预期填充。。。。但是…当我尝试使用jquery执行相同的操作时，请单击函数$（'addFilterExpression'）。单击（函数（）{$（'filterElements'）。append（''）。append（''））.html（“”；'）；我得到的只是一个空的滴落物啊！问题是在执行ko.applyBindings时没有创建DOM元素。因此，您需要告诉knockout在addFilterExpression单击处理程序中再次应用绑定。我已经相应地更新了答案。