javascript - 将 js knockout 到 mysql 数据库，使动态值不起作用

Question

我无法将 brandName 的值发送到数据库。我正在尝试使用 ajax 发送数据。我还有一个 addBrandName 按钮，单击该按钮可添加新字段，这意味着我想一次将多个输入值插入 到数据库中。但到目前为止，我遇到了问题。问题出在哪里或我该如何纠正的任何建议？这是一个 fiddle用于演示。

我的 html 部分是:

<button data-bind='click: addBrandName'>Add a brand</button>
<table data-bind="foreach: brandNames">
   <tbody>
      <td>
         <label>Brand name</label>
         <input type="text" data-bind='value: brandName'>
      </td>
   </tbody>
</table>
<button data-bind="click: addToDB">Add to database</button>

和脚本:

var brandNamesModel = function(brandNames) {
    var self = this;
    self.brandNames = ko.observableArray(ko.utils.arrayMap(brandNames));

    self.addBrandName = function() {
        self.brandNames.push({
            brandName: ""
        });
    };
};

this.addToDB = function() {
    var toDB = {
        'bName': this.brandName()
    };

    $.ajax({
        url: 'action.php',
        type: 'POST',
        data: {
            'detail': toDB,
            'action': 'insert'
        },
        success: function() {
            self.brandName("");
        }
    });
};

ko.applyBindings(new brandNamesModel());

action.php 是:

<?php
$db = new MySqli('localhost', 'ashonko', '', 'tutorials');

$action = (!empty($_POST['action'])) ? $_POST['action'] : '';
$detail = (!empty($_POST['detail'])) ? $_POST['detail'] : '';

if (!empty($detail)) {
    $bName = $detail['bName'];
}

switch ($action) {
    case 'insert':
        $db->query("INSERT INTO products SET name = '$bName'");
        break;
}
?>

Answer 1

brandNamesModel 中没有brandName 属性。因此，当您在此处访问 this.brandName() 时:

var toDB = {
    'bName': this.brandName()
};

它抛出一个错误。 brandName 是您收藏的每个项目的属性 brandNames。因此，如果您想保存最近添加到您的收藏中的项目，您可以将其更改为:

this.addToDB = function() {
    if(this.brandName().length == 0)
        return;

    // gets the last brandName entered
    var toDB = {
        'bName': this.brandNames()[this.brandNames().length -1].brandName
    };

    $.ajax({
        url: 'action.php',
        type: 'POST',
        data: {
            'detail': toDB,
            'action': 'insert'
        },
        success: function() {
            // this will also throw an error
            self.brandName("");
        }
    });
};

Here's a fiddle用于测试上述代码。

但是你需要改变输入的逻辑。您应该只有一个输入，而不是在每个 td 中都有一个输入。像这样:

<label>Brand name</label>

<!--This one is outside the foreach. Refers to the brandNamesModel-->
<input type="text" data-bind='value: brandName'>

<button data-bind='click: addBrandName'>Add a brand</button>
<table>
  <thead>
    <tr>
      <th>Brand Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: brandNames">
    <tr>
      <!--This brandname is referring to property in the array-->
      <td data-bind="text:brandName">
      </td>
    </tr>

  </tbody>
</table>
<button data-bind="click: addToDB">Add to database</button>

这是一个 fiddle证明这一点。