Question

这是我目前正在使用的代码

<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>

现在'选择'的东西似乎让我感到头疼

在身体中放置

时效果很好

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

Answer 1

您的javascript只是作为渲染页面运行。尝试将javascript放在document.ready处理程序中并重新排序函数调用：

<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>

更新：您还需要在任何新创建的指定ko.applyBindings属性的DOM元素上调用data-bind。请参阅上面的$('#addFilterExpression').click函数

knockoutjs很奇怪/（也许我太愚蠢了解）下拉行为

1 个答案: