ノックアウトビューモデル関数が呼び出されていない

Question

私は_Layout.cshtmlページで参照されているノックアウト（v3.2.0）とjQuery（v1.12.4）を使用しています。 ManageActivities.cshtmlページのjavascriptセクションにcloneActivityという関数があります。これは、以下に貼り付けられたボタンのマークアップからトリガーされるべきです。

<script type="text/javascript"> 
    $(function() { 
    var employeeId = @ViewBag.UserInfo.UserId; 

    function ActivityViewModel() { 
     var self = this; 
     self.ActivityHistoryId = ko.observable(""); 
     self.CompanyId = ko.observable(""); 
     self.UserId = ko.observable(""); 
     self.WorkFlowId = ko.observable(""); 
     self.ActivityName = ko.observable(""); 
     self.ActivityDescription = ko.observable(""); 
     self.Status = ko.observable(""); 

     var Activity = { 
     ActivityHistoryId: self.ActivityHistoryId, 
     CompanyId: self.CompanyId, 
     UserId: self.UserId, 
     WorkFlowId: self.WorkFlowId, 
     ActivityName: self.ActivityName, 
     ActivityDescription: self.ActivityDescription, 
     Status: self.Status 
     }; 

    self.Activity = ko.observable(); 
    self.ActivitiesArray = ko.observableArray(); 

    self.cloneActivity = function() { 
     console.log('clone row clicked'); 
    }; 
    }; 

    var activityViewModel = new ActivityViewModel(); 
    ko.applyBindings(activityViewModel); 
}); 
</script> 

HTMLボタンのマークアップ

<button class="btn btn-xs btn-success" title="clone work activity" name="cloneWork" data-toggle="modal" data-target="#addWorkInModal" data-bind="click: $root.cloneActivity"><i class="fa fa-clone"></i></button> 

私はすべてのエラーが表示されないと、関数が呼び出されていません。私はボタンのクリックの前に$ parent、$ parents [1]、self、$ rootと何も試していません。私は、ActivityViewModelの外に関数を移動し、ボタンをonclick = "cloneActivity（）;"私はコンソールでメッセージを見ることができます。

私のアプリケーション内の他の場所でも同じ概念が働いているため、何が欠落しているのかわかりません。どんな助けでも大歓迎です。サーバーからデータを返す

私のテーブルのマークアップ....

<div class="panel-body"> 
    <table id="master" class="table table-striped table-hover table-condensed" cellspacing="0"> 
    <thead> 
     <tr> 
     <th class="rpt_col_bg_head" style="width: 3%;"></th> 
     <th class="rpt_col_bg_head" style="width: 20%;">Result</th> 
     <th class="rpt_col_bg_detail" style="width: 20%;">Work Activity</th> 
     <th class="rpt_col_bg_detail" style="width: 180px;">Effort(%)</th> 
     <th class="rpt_col_bg_detail" style="width: 7%;">Status</th> 
     <th class="rpt_col_bg_detail" style="width: 30%;">Were there any innovations</th> 
     <th class="rpt_col_bg_detail text-center" style="width: 7%;">Action</th> 
    </tr> 
    </thead> 
    </table> 
</div> 

AJAX呼び出しは次のようになります。

var table = $('#master').DataTable({ 
    ajax : { 
    type : "POST", 
    url : "@Url.Action("GetAllActivities", "Activities")", 
    data : { "UserId" : employeeId } 
    }, 
    columns : [ 
    { className : "details-control", orderable : false, defaultContent: "" }, 
    { orderable : false, data : "ParentName" }, 
    { orderable : false, data : "ActivityName" }, 
    { orderable : false, data : "EffortHtml" }, 
    { orderable : false, data : "Status" }, 
    { orderable : false, data : "Innovation" }, 
    { orderable : false, data : "ActionButtons" } 
    ], 
    columnDefs : [{ 
    targets: [6], //disable search and sort on Actions column 
    searchable : false, 
    orderable : false 
    }] 
}); 

私はに戻ってJSONを保存するためにXHRをキャプチャノックアウトが観察している私のビューモデル。

table.on('xhr', function() { 
    var json = table.ajax.json(); 
    self.ActivitiesArray.push(json.data); // Initialize the view-model 
    console.log(ko.toJSON(self.ActivitiesArray)); 
});  

ここには、IDが関連付けられたボタンのマークアップとともに返されるJSONがあります。

[[{"ActivityHistoryId":1,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 1","ActivityDescription":"Description of Test Activity 1","Status":"<span class='badge badge-blue'>Not Started</span>","Effort":25,"EffortHtml":"<span id='originalEffort1'>25</span><button class='btn btn-xs text-primary' style='background: none; margin-bottom: 5px;' title='edit effort' onclick='showEdit(25);'><i class='fa fa-pencil'></i></button><section id='editEffort25' class='edit bg-warning edit-box' style='display: none;'><div style='margin-top: 5px;'><label class='text-muted'>Adjust Effort(%) </label><input type='number' min='1' max='200' class='effort' id='adjustedEffort1' style='width: 100%;'></div><small id='enterEffortMsg1' class='error-effort text-danger display: none;'></small><div style='margin-top: 5px;'><label class='text-muted'>Total Annual Effort(%) </label><input type='number' class='total_effort text-muted' id='totalEffort25' value='' disabled='' style='width: 100%;'></div><div class='total_after_adjust text-danger' style='margin-top: 15px;'></div><div id='totalAfterAdjustmentDiv1' class='total_after_adjust text-danger' style='margin - top: 15px; display: none;'><label id='totalAfterAdjustment1'><small></small><br></label></div><div style='margin-top: 5px;' class='text-center'><button onclick='checkEditEffort(1);' class='btn btn-info btn-xs' title='check total annual effort after adjust'>Check</button><button onclick='saveEditEffort(1);' class='btn btn-primary btn-xs' style='margin-left: 5px;'>Save</button><button onclick='showEdit(25);' class='btn btn-default btn-xs' style='margin-left: 5px;'>Cancel</button></div><div id='saveSuccess1' class='alert alert-success' style='display:none; margin-top: 10px; margin-bottom: 0;'><i class='fa fa-check'> Update Success!</i></div><div class='alert alert-danger' style='display:none; margin-top: 10px; margin-bottom: 0;'></div></section>","Innovation":false,"ParentId":2,"ParentName":"Test Result 1","ActionButtons":"<td><div class='text-center'><ul class='list-inline'><li><button class='btn btn-xs btn-primary' title='edit work activity' name='editWork' onclick='editActivity(1);'><i class='fa fa-pencil'></i></button></li><li><button class='btn btn-xs btn-danger' title='delete work activity' name='deleteWork' data-toggle='modal' data-target='#confirm_modal' onclick='deleteActivity(1);'><i class='fa fa-remove'></i></button></li><li><button class='btn btn-xs btn-success' title='clone work activity' name='cloneWork' data-bind='click: $root.cloneActivity'><i class='fa fa-clone'></i></button></li></ul></div></td>"},{"ActivityHistoryId":2,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 2","ActivityDescription":"Description of Test Activity 2","Status":"<span class='badge badge-blue'>Not Started</span>","Effort":9,"EffortHtml":"<span id='originalEffort2'>9</span><button class='btn btn-xs text-primary' style='background: none; margin-bottom: 5px;' title='edit effort' onclick='showEdit(9);'><i class='fa fa-pencil'></i></button><section id='editEffort9' class='edit bg-warning edit-box' style='display: none;'><div style='margin-top: 5px;'><label class='text-muted'>Adjust Effort(%) </label><input type='number' min='1' max='200' class='effort' id='adjustedEffort2' style='width: 100%;'></div><small id='enterEffortMsg2' class='error-effort text-danger display: none;'></small><div style='margin-top: 5px;'><label class='text-muted'>Total Annual Effort(%) </label><input type='number' class='total_effort text-muted' id='totalEffort9' value='' disabled='' style='width: 100%;'></div><div class='total_after_adjust text-danger' style='margin-top: 15px;'></div><div id='totalAfterAdjustmentDiv2' class='total_after_adjust text-danger' style='margin - top: 15px; display: none;'><label id='totalAfterAdjustment2'><small></small><br></label></div><div style='margin-top: 5px;' class='text-center'><button onclick='checkEditEffort(2);' class='btn btn-info btn-xs' title='check total annual effort after adjust'>Check</button><button onclick='saveEditEffort(2);' class='btn btn-primary btn-xs' style='margin-left: 5px;'>Save</button><button onclick='showEdit(9);' class='btn btn-default btn-xs' style='margin-left: 5px;'>Cancel</button></div><div id='saveSuccess2' class='alert alert-success' style='display:none; margin-top: 10px; margin-bottom: 0;'><i class='fa fa-check'> Update Success!</i></div><div class='alert alert-danger' style='display:none; margin-top: 10px; margin-bottom: 0;'></div></section>","Innovation":false,"ParentId":2,"ParentName":"Test Result 1","ActionButtons":"<td><div class='text-center'><ul class='list-inline'><li><button class='btn btn-xs btn-primary' title='edit work activity' name='editWork' onclick='editActivity(2);'><i class='fa fa-pencil'></i></button></li><li><button class='btn btn-xs btn-danger' title='delete work activity' name='deleteWork' data-toggle='modal' data-target='#confirm_modal' onclick='deleteActivity(2);'><i class='fa fa-remove'></i></button></li><li><button class='btn btn-xs btn-success' title='clone work activity' name='cloneWork' data-bind='click: $root.cloneActivity'><i class='fa fa-clone'></i></button></li></ul></div></td>"},{"ActivityHistoryId":3,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 3","ActivityDescription":"Description of Test Activity 3","Status":"<span class='badge badge-lightBlue'>In Progress</span>","Effort":12,"EffortHtml":"<span id='originalEffort3'>12</span><button class='btn btn-xs text-primary' style='background: none; margin-bottom: 5px;' title='edit effort' onclick='showEdit(12);'><i class='fa fa-pencil'></i></button><section id='editEffort12' class='edit bg-warning edit-box' style='display: none;'><div style='margin-top: 5px;'><label class='text-muted'>Adjust Effort(%) </label><input type='number' min='1' max='200' class='effort' id='adjustedEffort3' style='width: 100%;'></div><small id='enterEffortMsg3' class='error-effort text-danger display: none;'></small><div style='margin-top: 5px;'><label class='text-muted'>Total Annual Effort(%) </label><input type='number' class='total_effort text-muted' id='totalEffort12' value='' disabled='' style='width: 100%;'></div><div class='total_after_adjust text-danger' style='margin-top: 15px;'></div><div id='totalAfterAdjustmentDiv3' class='total_after_adjust text-danger' style='margin - top: 15px; display: none;'><label id='totalAfterAdjustment3'><small></small><br></label></div><div style='margin-top: 5px;' class='text-center'><button onclick='checkEditEffort(3);' class='btn btn-info btn-xs' title='check total annual effort after adjust'>Check</button><button onclick='saveEditEffort(3);' class='btn btn-primary btn-xs' style='margin-left: 5px;'>Save</button><button onclick='showEdit(12);' class='btn btn-default btn-xs' style='margin-left: 5px;'>Cancel</button></div><div id='saveSuccess3' class='alert alert-success' style='display:none; margin-top: 10px; margin-bottom: 0;'><i class='fa fa-check'> Update Success!</i></div><div class='alert alert-danger' style='display:none; margin-top: 10px; margin-bottom: 0;'></div></section>","Innovation":true,"ParentId":5,"ParentName":"Test Result 2","ActionButtons":"<td><div class='text-center'><ul class='list-inline'><li><button class='btn btn-xs btn-primary' title='edit work activity' name='editWork' onclick='editActivity(3);'><i class='fa fa-pencil'></i></button></li><li><button class='btn btn-xs btn-danger' title='delete work activity' name='deleteWork' data-toggle='modal' data-target='#confirm_modal' onclick='deleteActivity(3);'><i class='fa fa-remove'></i></button></li><li><button class='btn btn-xs btn-success' title='clone work activity' name='cloneWork' data-bind='click: $root.cloneActivity'><i class='fa fa-clone'></i></button></li></ul></div></td>"}]] 

Answer 1

あなたはtableが完了したら、レンダリングapplyBindingsを呼び出す必要があります。

あなたの代わりにinit.dtイベントを使用することができますxhr

​​

EDIT：あなたのtableはactivityViewModelに依存している場合

は、 は、あなたがメインのスクリプト関数でapplyBindingsを維持し、前にDOMをきれいにすることができます再適用

table.on('init.dt', function (e, settings, json) { 
    self.ActivitiesArray.push(json.data); // Initialize the view-model 
    console.log(ko.toJSON(self.ActivitiesArray)); 

    // clean the dom since we already applied bindings 
    ko.cleanNode(document.body); 

    // re apply bindings here 
    ko.applyBindings(activityViewModel); 
}); 

Answer 2

あなたはIIFEを呼び出しておらず、その前にjQuery $記号があります。それは以下の形式でなければなりません。または、IIFE内部で使用していないため、jQuery宣言を省略することもできます。

(function($){ 
    // stuff 
})(jQuery); 

あなたのコードには、式を呼び出す最後の括弧がありません。

---

私は$(function(){});構築物がどのように動作するかを確認されませんでしたが、それは私がそのショートカットを使用していないと、このようなコード構造化するでしょう$(document).ready(function(){});呼び出すためのショートカットであることが判明：

_layoutを。あなたのページで

// load jQuery and knockoutJS here 
@RenderSection("scripts", required: false) 

：終了bodyタグの前にCSHTML

@section scripts 
{ 
    <script> 
     (function($, ko) { 

      // stuff 

      $(document).ready(function() { 
       var activityViewModel = new ActivityViewModel(); 
       ko.applyBindings(activityViewModel); 
      }); 

     })(jQuery, ko); 
    </script> 
}