1

我有动态创建产品功能列表并将所有值放在一个字符串中的代码，该字符串由换行符分隔并保存到数据库中。当这个字符串被传递给视图时，我输出为一个无序列表。当我去编辑块时，它不会显示列表中已有的内容，所以每次我需要编辑我的块时，我都必须重新输入所有功能，即使它不是功能列表（我有一些标题和其他文本区域） . 如果我将 php 变量放入我的编辑页面，它将向我显示已保存的内容，但我需要将其立即添加到列表中并且不单独显示。我基本上需要它来“自动追加”我的<ul>. 这是我的代码...

将列表保存在 controller.php 中的控制器函数

public function save($args) {
        $args['features'] = implode("\n", $args['features']);//combine all feature items into one string, separated by "newline" characters
        parent::save($args);
    }

我的edit.php - 这将显示在一个列表中。如果我只是把echo $features它输出字符串。

echo '<div class="ccm-block-field-group">';
echo '<h2>' . t('Features') . '</h2>';
echo '<input type="text" id="inputList" />';
echo '<button type="button" id="addList">Add</button>';
echo $features = explode("\n", $features);
        foreach ($features as $feature) {
            echo '<li class="currentFeatures">' . $feature . '</li>';
        };

echo '<ul class="featureList">';
echo '</ul>';
echo '</div>';

我的 auto.js - 处理列表的创建

var listItemCounter = 0;
    $("#addList").click(function() {
        listItemCounter++;
        var text = $("#inputList").val(); //assign a unique id number to this button, so it knows which hidden field to remove when clicked
        var buttonDataId = text + '<button data-id="' + listItemCounter + '">x</button>';
        if(text.length){
            $('<li />', {html: buttonDataId}).appendTo('ul.featureList');
            $('<input type="hidden" name="features[]" value="' + text + '" data-id="' + listItemCounter + '" />').insertAfter('ul.featureList');
            };
    });
    $('ul').on('click','button', function(el){
        $('input[data-id="' + $(this).attr('data-id') + '"]').remove();//remove the hidden field so it does not get POSTed when user saves
        $(this).parent().remove()
    });

最后是我的 db.xml 的一部分

<field name="features" type="X2"></field>
4

1 回答 1

1

您将想做类似于我在其他问题（https://stackoverflow.com/a/14968046/477513）中为“视图”解释的内容。

您想将列表从字符串更改为数组（通过explode("\n", $features)），然后在每个功能上运行您的 javascript。由于这与有人通过文本框添加新项目时所做的基本相同的 javascript，因此您需要将所有代码移动到一个函数中并在两种情况下调用该函数（否则您将复制和粘贴相同的代码，这违反了“不要重复自己”的规则，将来不可避免地会导致错误）。所以你的 auto.js 代码可能看起来像这样：

var listItemCounter = 0;

function addItem(text) {
    if (text.length) {
        listItemCounter++;
        var itemHtml = '<li data-id="' + listItemCounter + '">'
                     + text
                     + '<button data-id="' + listItemCounter + '">x</button>'
                     + '</li>';
        var inputHtml = '<input type="hidden" name="features[]" value="' + text + '" data-id="' + listItemCounter + '" />';
        $('ul.featureList').append(itemHtml);
        $('ul.featureList').after(inputHtml);
    }
}

function removeItem(id) {
    $('input[data-id="' + id + '"]').remove();
    $('li[data-id="' + id + '"]').remove();
}

$("#addList").click(function() {
    additem($("#inputList").val());
});

$('ul').on('click','button', function(el) {
    var id = $(this).attr('data-id');
    removeItem(id);
});

然后在您的 edit.php 文件中，添加此代码以输出保存的数据并在每个文件上调用 addItem 函数：

<?php
//populate existing data when edit dialog is first opened
$featuresPHPArray = explode("\n", $features);
$featuresJSArray = Loader::helper('json')->encode($featuresPHPArray);
?>
<script>
var savedItems = <?php echo $featuresJSArray; ?>;
$.each(savedItems, function() {
    addItem(this);
});
</script>
于 2013-02-21T19:58:02.787 回答