陣列內的基因敲除陣列

我正嘗試使用基因敲除來創建一個簡單的電子表格。我試圖讓每個細胞都是可觀察的，所以在變化時，我可以評估這些值並據此進行計算。因此，如果他們在一個單元格中輸入6 + 7，我可以評估並將其值更改爲總數。陣列內的基因敲除陣列

但是，我不能讓每個單元格都是可觀察的。也許我錯了。

我試圖創建一個小提琴，但我現在正在爭取讓jquery加載。所以儘管我可以在本地的Visual Studio中運行它，但小提琴抱怨着$。（任何幫助解決這將是偉大的）。

我生成這樣我的可觀察到的數組： self.RowCount = ko.observable（0）; self.ColumnCount = ko.observable（0）;

self.Columns = ko.observableArray([]); 
self.Rows = ko.observableArray([]); 

self.Refresh = function() { 

    for (i = 0; i < self.RowCount(); i++) { 
     var obj = { 
      data: i + 1, 
      calculated: i, 
      rowNum: i, 
      colNum: 0, 
      columns: ko.observableArray([]) 
     }; 

     for (j = 0; j < self.ColumnCount(); j++) { 
      obj.columns.push(ko.observable({ 
       label: self.Letters[j], 
       value: j + 1, 
       colIndex: j, 
       rowIndex: i 
      })); 
     } 
     self.Rows.push(obj); 

    } 
    self.ShowSheet(self.RowCount() > 0 && self.ColumnCount() > 0);

我呈現基於列和由用戶輸入（目前行的表，限於5×5，如我使用陣列轉換1,2,3（列），以A，B ，C，但這是暫時的，將是固定的。

我怎樣才能得到每個單元可觀察到，這樣我就可以訂閱並觸發對變化的事件？

來源

2017-08-10 Craig

你似乎並不具備利用了cellObject（從你的小提琴）。如果你添加cellObject類型的對象到行中，並且在那裏有一個可觀察的value，你可以訂閱chang就此而言。

固定碼：

var cellObject = function() { 
 
    var self = this; 
 
    self.data = ko.observable(); 
 
    self.calculated = ko.observable(); 
 
    self.rowNum = ko.observable(0); 
 
    self.colNum = ko.observable(0); 
 
    self.rows = ko.observableArray([]); 
 
    self.value = ko.observable(); 
 
} 
 

 
function SpreadsheetViewModel() { 
 
    var self = this; 
 
    self.ShowSheet = ko.observable(false); 
 
    self.ShowSheet(false); 
 

 
    self.Letters = ['A', 'B', 'C', 'D', 'E'] 
 

 

 
    self.RowCount = ko.observable(0); 
 
    self.ColumnCount = ko.observable(0); 
 

 
    self.Columns = ko.observableArray([]); 
 
    self.Rows = ko.observableArray([]); 
 

 
    function valueChanged(newValue) { 
 
    console.log("Value changed to " + newValue); 
 
    } 
 

 
    self.Refresh = function() { 
 

 
    for (i = 0; i < self.RowCount(); i++) { 
 
     var row = { 
 
     cells: ko.observableArray([]) 
 
     }; 
 

 
     for (j = 0; j < self.ColumnCount(); j++) { 
 
     var cell = new cellObject(); 
 
     cell.label = self.Letters[j]; 
 
     cell.data(i + 1); 
 
     cell.calculated(i); 
 
     cell.rowNum(i); 
 
     cell.colNum(j); 
 
     cell.value(j + 1); 
 

 
     cell.value.subscribe(valueChanged); 
 
     row.cells.push(cell); 
 
     } 
 
     self.Rows.push(row); 
 

 
    } 
 
    self.ShowSheet(self.RowCount() > 0 && self.ColumnCount() > 0); 
 
    } 
 

 
    self.Refresh(); 
 

 
} 
 

 
var vm = new SpreadsheetViewModel(); 
 
ko.applyBindings(vm);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="spreadsheetSection"> 
 

 
    <div class="row"> 
 
    <div class="col-xs-3 text-right">No. of Columns</div> 
 
    <div class="col-xs-2"> 
 
     <input type="text" class="form-control" placeholder="Columns" data-bind="value: ColumnCount"> 
 
    </div> 
 
    <div class="col-xs-3 text-right">No. of Rows</div> 
 
    <div class="col-xs-2"> 
 
     <input type="text" class="form-control" placeholder="Rows" data-bind="value: RowCount"> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     <button class="btn btn-default" data-bind="click: Refresh">Refresh</button> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <!-- ko if: ShowSheet --> 
 
    <table class="table table-bordered table-hover table-striped"> 
 
     <tbody> 
 
     <tr data-bind="foreach: Rows()[0].cells"> 
 
      <td> 
 
      <span data-bind="text: label"></span> 
 
      </td> 
 

 
     </tr> 
 
     </tbody> 
 
     <tbody data-bind="foreach: Rows"> 
 
     <tr data-bind="foreach: cells"> 
 
      <td> 
 
      <input type="text" class="form-control" data-bind="value: value"> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <!-- /ko --> 
 
    </div> 
 
</div>

固定小提琴：https://jsfiddle.net/tr9asadp/3/

來源

2017-08-10 02:42:25 H77

謝謝！這很好。我太親密了...只是沒有讓我的頭在使用我的對象，而不是一個匿名的。我最喜歡訂閱主視圖模型嗎？原因是，如果該人輸入'= B2'...我需要找到B2單元格，獲取該值並使用該值。在對象中訂閱它是自我的 - 我不確定我可以訪問所有其他單元格。 – Craig

檢查更新。它並不是完全訂閱到主視圖模型，但該功能現在位於主視圖模型中，因此您可以訪問其他單元格。 – H77

謝謝H77 ...我得到'valueChanged'不是一個函數。應該將其聲明爲self.valueChanged嗎？ – Craig

我使用的writableComputable http://knockoutjs.com/documentation/computed-writable.html，使得如果在細胞和標籤出的一種類型的1 + 1，它會更改爲2.這裏是更新的小提琴。 http://jsfiddle.net/tr9asadp/5/

function column(label, value, colIndex, rowIndex){ 
var self = this; 
this.label = ko.observable(label); 
this.value = ko.observable(value); 
this.colIndex = ko.observable(colIndex); 
this.rowIndex = ko.observable(rowIndex); 
this.writableValue = ko.pureComputed({ 
     read: function() { 
      return self.value(); 
     }, 
     write: function (v) { 
      self.value(eval(v)) 
     }, 
     owner: this 
    }); 
}

來源

2017-08-10 03:25:10

陣列內的基因敲除陣列

回答

相關問題