Попытка построить элементы HTML с помощью кода, включая функции - PullRequest
Новая
       1

Попытка построить элементы HTML с помощью кода, включая функции

0 голосов
/ 03 ноября 2019

Это мой первый пост, в надежде, что кто-то может мне помочь:

Я хочу создать веб-проект, в котором все элементы HTML хранятся в базе данных и извлекаются из нее для создания веб-страницы.

Я обнаружил проблему с кнопками, я не могу найти способ сохранить функцию для кнопки, я использую Jquery для создания элементов, сейчас определения тестовых элементов моделируются в некоторых массивах, которые я оставил вначало моего файла Js, единственный способ заставить кнопки работать, если функции жестко запрограммированы в файле Js, есть ли способ для меня также извлечь функции из базы данных? и иметь их в массиве?

это пример моего проекта:

HTML 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--script src="functions.js"></script-->
<script src="system.js"></script>
<!--script src="elements.js"></script-->

</head>
<body>

<body onload="addElements()">

  <div id="div1"></div>

</body>
</html>

Файл JS 

/**
VARIABLE DEFINITIONS
THESE ARE SUPPOSED TO COME FROM A DATABASE
STILL UNKNOWN HOW TO BRING THE FUNCTIONS, AS STRING THEY ARE NOT ALLOWED. FOR NOW THERE ARE TEST FUNCTIONS.
**/

let buttonIds = ['btn1', 'btn2'];
let buttonText = ['Show Text', 'Show HTML'];
let buttonFunc = [alert1, alert2];
//let buttonFunc = ['alert("Hi");', 'alert("Hello");'];
let paragraphs = ['This is some <b>bold</b> text in a paragraph.', 'another <b>bold</b> test'];


//HELPER FUNCTIONS
// **** THESE ARE SUPPOSED TO COME FROM DATABASE, UNKNOWN HOW TO DO IT. ****

function alert1() {
    alert("Hi");
}

function alert2(){
    alert("Hello");
}




function addElements(){ 
    for(var p=0; p<paragraphs.length; p++){ addParagraphs('#div1', paragraphs[p]);                  }
    for(var i=0; i<buttonIds.length; i++) { createButton( '#div1', buttonIds[i]  , buttonText[i]);  }
}

// ANY ELEMENTS FUNCTION IS DEFINED HERE ONCE THE PAGE IS LOADED.
$(document).ready(function(){
    for(var x=0;x<buttonIds.length; x++){ activateButton(buttonIds[x], buttonFunc[x]); }
});


//HELPER FUNCTIONS USED TO BUILD THE HTML ELEMENTS ON THE MAIN PAGE.
function addParagraphs(location, text){
  $(location).append('<p id="test">'+text+'</p>');
}


function createButton(location, id, text){
var definition;

definition = "<button id="+id+">"+text+"</button>";
$(location).append(definition);
}


function activateButton(buttonId, functionName){
  var composedId = "#"+buttonId;
    $(composedId).click(functionName);
}

Ответы [ 2 ]

0 голосов
/ 03 ноября 2019

Один из подходов - использовать объект для хранения функций в javascript и использовать имена свойств, хранящиеся в db, чтобы связать, какую функцию использовать для какого элемента.

Не зная больше о вашем сценарии использования, трудно действительнопомогите спроектировать правильную систему для использования

Ниже приведен очень простой пример 

// functions stored in js file
const funcs = {
    f1: function(e){ console.log('func one called , id = ', this.id)},
    f2: function(e){ console.log('func 2 called , id = ', this.id)}
}

// data from database
const elems = [
   {id: 1, className: 'one', func:'f1', text:'Item 1'},
   {id: 1, className: 'two', func:'f2', text:'Item 2'}
]

elems.forEach(e => {
   const $el= $('<div>', {id: e.id, class: e.className, text:e.text, click: funcs[e.func]})
   $('body').append($el);
});
div {margin:1em;}
.one {color:red;}
.two {color:green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>Click on items</strong><br><br>
0 голосов
/ 03 ноября 2019

Вы можете создавать файловый сервер Javascript со всеми необходимыми вам функциями. Предположим, Node.js вы можете сделать что-то вроде этого: 

expressApp.get("some.js", (req, res) => {
  getDataFromDatabase() // depends on your database
  .then(data => {
    let body = 'function your_fn () { alert("'+ JSON.stringify(data) +'")}';
    res.send(body);
  }) 
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...